added possibility to scroll Et2TreeDropdown on open to current selection.

-- set openAtSelection="true" attribute on the et2-tree-dropdown
-- use for timezone selection in preferences
-- regarding Ticket #97411
This commit is contained in:
milan 2024-10-31 13:41:10 +01:00
parent 21aec1a93d
commit 66e222e035
3 changed files with 66 additions and 1 deletions

View File

@ -667,6 +667,59 @@ export class Et2Tree extends Et2WidgetWithSelectMixin(LitElement) implements Fin
item.focused = true item.focused = true
} }
/**
* scroll to item with given id
* make sure all parents of the item are expanded else scroll will fail
* @param _id
*/
public scrollToItem(_id: string)
{
const item: SlTreeItem = this.getDomNode(_id);
if (item == null) return
item.scrollIntoView();
}
/**
* scrolls to the (first) selected slTreeItem into view
* this function delays, if not all parents of the item are expanded
*
*/
public scrollToSelected()
{
try
{
const item: SlTreeItem = this.shadowRoot.querySelector('sl-tree-item[selected]');
if (item == null) return
//this might not work because item pant is not expanded
//in that case expand all parents and wait before trying to scroll again
let parent: SlTreeItem = item.parentElement?.tagName === "SL-TREE-ITEM" ? <SlTreeItem>item.parentElement : null;
//scroll and exit if parent does not need expansion
if (!parent || parent.expanded)
{
item.scrollIntoView()
return
}
//fallback
//expand all parent items
while (parent)
{
if (!parent.expanded) parent.expanded = true;
parent = parent.parentElement?.tagName === "SL-TREE-ITEM" ? <SlTreeItem>parent.parentElement : null;
}
// this.updateComplete.then(
// (bool: boolean) =>
// item.scrollIntoView()
// )
// waiting for update complete is not enough
setTimeout(()=> item.scrollIntoView(),500)
} catch (e)
{
console.log("Could not scroll to item");
}
}
/** /**
* Open an item, which might trigger lazy-loading * Open an item, which might trigger lazy-loading
* *

View File

@ -118,6 +118,12 @@ export class Et2TreeDropdown extends SearchMixin<Constructor<any> & Et2InputWidg
return this._tree?.leafOnly; return this._tree?.leafOnly;
} }
/**
* set the corresponding attribute if you want the tree to scroll to the selected item, when it is opened
* Please already supply the parents of the current selection in an open state from the server side if possible
*/
@property({type: Boolean}) openAtSelection = false
@state() currentTag: Et2Tag; @state() currentTag: Et2Tag;
// We show search results in the same dropdown // We show search results in the same dropdown
@ -289,9 +295,14 @@ export class Et2TreeDropdown extends SearchMixin<Constructor<any> & Et2InputWidg
this.requestUpdate("open", true); this.requestUpdate("open", true);
return this.updateComplete; return this.updateComplete;
} }
this.open = true; this.open = true;
this.requestUpdate("open", false) this.requestUpdate("open", false)
if (this.openAtSelection)
{
//TODO check what to wait on, waiting on updateComplete does not work
setTimeout(() =>
this._tree.scrollToSelected(),100)
}
return this.updateComplete return this.updateComplete
} }

View File

@ -381,6 +381,7 @@ class preferences_hooks
'attributes' => array( 'attributes' => array(
'search' => true, 'search' => true,
'leafOnly' => true, // don't allow to select continents 'leafOnly' => true, // don't allow to select continents
'openAtSelection' => true, // scroll to selected item on open
) )
), ),
'tz_selection' => array( 'tz_selection' => array(