extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2024-12-22 23:00:56 +01:00
Code Issues Packages Projects Releases Wiki Activity

Et2Select: Pressing tab on empty search moves focus to next element

Browse Source
This commit is contained in:
nathan 2023-11-22 11:52:49 -07:00
parent 5df9e2cbb0
commit 76428946a1
3 changed files with 17 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
api/js/etemplate/Et2Select/Et2Select.ts
View File

@ -764,6 +764,7 @@ export class Et2Select extends Et2WithSearchMixin(Et2WidgetWithSelect)
icon:icon icon:icon
" "
class=${"search_tag " + option.classList.value} class=${"search_tag " + option.classList.value}
tabindex="-1"
?pill=${this.pill} ?pill=${this.pill}
size=${this.size || "medium"} size=${this.size || "medium"}
?removable=${!readonly} ?removable=${!readonly}
@ -828,7 +829,6 @@ export class Et2Select extends Et2WithSearchMixin(Et2WidgetWithSelect)
?clearable=${this.clearable} ?clearable=${this.clearable}
?required=${this.required} ?required=${this.required}
helpText=${this.helpText} helpText=${this.helpText}
tabindex="0"
hoist hoist
placement=${this.placement} placement=${this.placement}
.getTag=${this._tagTemplate} .getTag=${this._tagTemplate}

14
api/js/etemplate/Et2Select/SearchMixin.ts
View File

@ -470,6 +470,7 @@ export const Et2WithSearchMixin = dedupeMixin(<T extends Constructor<LitElement>
exportparts="base:search__base" exportparts="base:search__base"
clearable clearable
autocomplete="off" autocomplete="off"
tabindex="-1"
placeholder="${this.egw().lang("search")}" placeholder="${this.egw().lang("search")}"
style="flex: 1 1 auto;" style="flex: 1 1 auto;"
@keydown=${this._handleSearchKeyDown} @keydown=${this._handleSearchKeyDown}
@ -952,6 +953,19 @@ export const Et2WithSearchMixin = dedupeMixin(<T extends Constructor<LitElement>
// TODO // TODO
return; 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(); event.stopPropagation();
// Don't allow event to bubble or it will interact with select // Don't allow event to bubble or it will interact with select

4
api/js/etemplate/Et2Select/Tag/Et2EmailTag.ts
View File

@ -264,7 +264,7 @@ export class Et2EmailTag extends Et2Tag
const option = Et2EmailTag.email_cache[this.value]; const option = Et2EmailTag.email_cache[this.value];
button_or_avatar = html` button_or_avatar = html`
<et2-lavatar slot="prefix" part="icon" <et2-lavatar slot="prefix" part="icon" tabindex="-1"
@mousedown=${this.handleContactMouseDown} @mousedown=${this.handleContactMouseDown}
.size=${style.getPropertyValue("--icon-width")} .size=${style.getPropertyValue("--icon-width")}
lname=${option.lname || nothing} lname=${option.lname || nothing}
@ -279,7 +279,7 @@ export class Et2EmailTag extends Et2Tag
// Show a button to add as new contact // Show a button to add as new contact
classes['tag__has_plus'] = true; classes['tag__has_plus'] = true;
button_or_avatar = html` button_or_avatar = html`
<et2-button-icon image="add" @mousedown=${this.handleMouseDown} <et2-button-icon image="add" tabindex="-1" @mousedown=${this.handleMouseDown}
label="${this.egw().lang("Add a new contact")}" label="${this.egw().lang("Add a new contact")}"
statustext="${this.egw().lang("Add a new contact")}"> statustext="${this.egw().lang("Add a new contact")}">
</et2-button-icon>`; </et2-button-icon>`;