diff --git a/api/js/etemplate/Et2Select/Et2Select.ts b/api/js/etemplate/Et2Select/Et2Select.ts index 9bf236453a..502b1dbc49 100644 --- a/api/js/etemplate/Et2Select/Et2Select.ts +++ b/api/js/etemplate/Et2Select/Et2Select.ts @@ -764,6 +764,7 @@ export class Et2Select extends Et2WithSearchMixin(Et2WidgetWithSelect) icon:icon " class=${"search_tag " + option.classList.value} + tabindex="-1" ?pill=${this.pill} size=${this.size || "medium"} ?removable=${!readonly} @@ -828,7 +829,6 @@ export class Et2Select extends Et2WithSearchMixin(Et2WidgetWithSelect) ?clearable=${this.clearable} ?required=${this.required} helpText=${this.helpText} - tabindex="0" hoist placement=${this.placement} .getTag=${this._tagTemplate} diff --git a/api/js/etemplate/Et2Select/SearchMixin.ts b/api/js/etemplate/Et2Select/SearchMixin.ts index 51235f0d74..dad44ac01d 100644 --- a/api/js/etemplate/Et2Select/SearchMixin.ts +++ b/api/js/etemplate/Et2Select/SearchMixin.ts @@ -470,6 +470,7 @@ export const Et2WithSearchMixin = dedupeMixin( exportparts="base:search__base" clearable autocomplete="off" + tabindex="-1" placeholder="${this.egw().lang("search")}" style="flex: 1 1 auto;" @keydown=${this._handleSearchKeyDown} @@ -952,6 +953,19 @@ export const Et2WithSearchMixin = dedupeMixin( // TODO return; } + else if(event.key == "Tab" && !this._searchInputNode.value) + { + // Mess with tabindexes to allow focus to easily go to next control + const input = this.select.shadowRoot.querySelector('[tabindex="0"]'); + input.setAttribute("tabindex", "-1"); + this.updateComplete.then(() => + { + // Set it back so we can get focus again later + input.setAttribute("tabindex", "0"); + }) + // Allow to propagate + return; + } event.stopPropagation(); // Don't allow event to bubble or it will interact with select diff --git a/api/js/etemplate/Et2Select/Tag/Et2EmailTag.ts b/api/js/etemplate/Et2Select/Tag/Et2EmailTag.ts index 5ec4b83778..ea26bfaa1d 100644 --- a/api/js/etemplate/Et2Select/Tag/Et2EmailTag.ts +++ b/api/js/etemplate/Et2Select/Tag/Et2EmailTag.ts @@ -264,7 +264,7 @@ export class Et2EmailTag extends Et2Tag const option = Et2EmailTag.email_cache[this.value]; button_or_avatar = html` - `;