diff --git a/api/js/etemplate/Et2Select/SearchMixin.ts b/api/js/etemplate/Et2Select/SearchMixin.ts index 1097a218b5..fd05aeafe3 100644 --- a/api/js/etemplate/Et2Select/SearchMixin.ts +++ b/api/js/etemplate/Et2Select/SearchMixin.ts @@ -205,6 +205,11 @@ export const Et2WithSearchMixin = >(superclass .tag_image { margin-right: var(--sl-spacing-x-small); } + /* Maximum height + scrollbar on tags */ + .select__tags { + max-height: 5em; + overflow-y: auto; + } /* Keep overflow tag right-aligned. It's the only sl-tag. */ .select__tags sl-tag { margin-left: auto; @@ -496,6 +501,15 @@ export const Et2WithSearchMixin = >(superclass if(this.multiple && this.searchEnabled) { this._searchInputNode.focus(); + + // Scroll the new tag into view + if(event.detail && event.detail.item) + { + this.updateComplete.then(() => + { + this.shadowRoot.querySelector("et2-tag[value='" + event.detail.item.value + "']").scrollIntoView(); + }); + } } } @@ -864,6 +878,7 @@ export const Et2WithSearchMixin = >(superclass return html`