diff --git a/api/js/etemplate/Et2Tree/Et2Tree.ts b/api/js/etemplate/Et2Tree/Et2Tree.ts index 0631908c7c..f89ce4c428 100644 --- a/api/js/etemplate/Et2Tree/Et2Tree.ts +++ b/api/js/etemplate/Et2Tree/Et2Tree.ts @@ -667,6 +667,59 @@ export class Et2Tree extends Et2WidgetWithSelectMixin(LitElement) implements Fin 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" ? 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" ? 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 * diff --git a/api/js/etemplate/Et2Tree/Et2TreeDropdown.ts b/api/js/etemplate/Et2Tree/Et2TreeDropdown.ts index 86929d057e..70892c0ede 100644 --- a/api/js/etemplate/Et2Tree/Et2TreeDropdown.ts +++ b/api/js/etemplate/Et2Tree/Et2TreeDropdown.ts @@ -118,6 +118,12 @@ export class Et2TreeDropdown extends SearchMixin & Et2InputWidg 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; // We show search results in the same dropdown @@ -289,9 +295,14 @@ export class Et2TreeDropdown extends SearchMixin & Et2InputWidg this.requestUpdate("open", true); return this.updateComplete; } - this.open = true; 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 } diff --git a/preferences/inc/class.preferences_hooks.inc.php b/preferences/inc/class.preferences_hooks.inc.php index 727ffcc86d..6cbb83d0a7 100644 --- a/preferences/inc/class.preferences_hooks.inc.php +++ b/preferences/inc/class.preferences_hooks.inc.php @@ -381,6 +381,7 @@ class preferences_hooks 'attributes' => array( 'search' => true, 'leafOnly' => true, // don't allow to select continents + 'openAtSelection' => true, // scroll to selected item on open ) ), 'tz_selection' => array(