holm/egroupware
1
1
Fork 0
forked from extern/egroupware
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Et2Select: Tabbing out of search field now closes the dropdown

Browse Source
This commit is contained in:
nathan 2022-09-13 09:06:59 -06:00
parent bdeab2e8e1
commit 9096c17348
1 changed files with 19 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -270,6 +270,7 @@ export const Et2WithSearchMixin = <T extends Constructor<LitElement>>(superclass
this._handleSelect = this._handleSelect.bind(this);
this._handleChange = this._handleChange.bind(this);
this._handleSearchBlur = this._handleSearchBlur.bind(this);
this._handleClear = this._handleClear.bind(this);
this._handleDoubleClick = this._handleDoubleClick.bind(this);
this._handleSearchAbort = this._handleSearchAbort.bind(this);
@ -381,6 +382,7 @@ export const Et2WithSearchMixin = <T extends Constructor<LitElement>>(superclass
placeholder="${this.egw().lang("search")}"
style="width:100%"
@keydown=${this._handleSearchKeyDown}
@blur=${this._handleSearchBlur}
></et2-searchbox>
${edit}
`;
@ -660,6 +662,23 @@ export const Et2WithSearchMixin = <T extends Constructor<LitElement>>(superclass
}
}
/**
* Handle blur from search field
*
* Either the user changed fields, or selected an option. For selecting don't interfere, but for
* changing fields we need to make sure the menu is hidden.
*
* @param event
*/
async _handleSearchBlur(event : FocusEvent)
{
if(event.relatedTarget && this !== (<Element>event.relatedTarget).parentElement)
{
await this.dropdown.hide();
event.relatedTarget.focus();
}
}
/**
* Handle keypresses inside the search input
* @param {KeyboardEvent} event