extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2025-02-14 17:30:11 +01:00
Code Issues Packages Projects Releases Wiki Activity

Et2Select: Handle focus issue where double-tab was needed before you could drop down the options with space or down arrow

Browse Source
This commit is contained in:
nathan 2024-12-02 15:30:03 -07:00
parent 4a28b1bcd7
commit 41c2fa92e6
1 changed files with 21 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -95,6 +95,9 @@ export class Et2WidgetWithSelect extends RowLimitedMixin(Et2WidgetWithSelectMixi
// @ts-ignore SlSelect styles is a single CSSResult, not an array, so TS complains
export class Et2Select extends Et2WithSearchMixin(Et2WidgetWithSelect)
{
// Solves some issues with focus
static shadowRootOptions = {...LitElement.shadowRootOptions, delegatesFocus: true};
static get styles()
{
return [
@ -336,6 +339,7 @@ export class Et2Select extends Et2WithSearchMixin(Et2WidgetWithSelect)
connectedCallback()
{
super.connectedCallback();
this.addEventListener("focusin", this.handleFocus);
this.updateComplete.then(() =>
{
this.addEventListener("sl-change", this._triggerChange);
@ -353,6 +357,7 @@ export class Et2Select extends Et2WithSearchMixin(Et2WidgetWithSelect)
{
super.disconnectedCallback();
this.removeEventListener("focusin", this.handleFocus);
this.removeEventListener("sl-change", this._triggerChange);
}
@ -630,6 +635,13 @@ export class Et2Select extends Et2WithSearchMixin(Et2WidgetWithSelect)
return literal`et2-tag`;
}
/** Sets focus on the control. */
focus(options? : FocusOptions)
{
this.handleFocus();
}
/** Removes focus from the control. */
blur()
{
if(typeof super.blur == "function")
@ -639,6 +651,15 @@ export class Et2Select extends Et2WithSearchMixin(Et2WidgetWithSelect)
this.hide();
}
private handleFocus()
{
if(this.disabled || this.readonly)
{
return;
}
this.select?.focus();
}
/**
* Apply the user preference to close the dropdown if an option is clicked, even if multiple=true.
* The default (from SlSelect) leaves the dropdown open for multiple=true