extern/egroupware
1
0
Fork 1
mirror of https://github.com/EGroupware/egroupware.git synced 2025-01-27 08:19:45 +01:00
Code Issues Packages Projects Releases Wiki Activity

Select + search improvements

Browse Source 
- Use et2-search widget with clearable for search
- Add focus(), which opens & focuses search
This commit is contained in:
nathan 2022-08-16 16:46:20 -06:00
parent 0110cdf5f9
commit d5d9dd6164
2 changed files with 17 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -345,7 +345,11 @@ export const Et2WithSearchMixin = <T extends Constructor<LitElement>>(superclass
}
// I can't figure out how to get this full width via CSS
return html`
<input id="search" type="text" part="input" style="width:100%" @keydown=${this._handleSearchKeyDown}/>
<et2-searchbox id="search" type="text" part="input" clearable
placeholder="${this.egw().lang("search")}"
style="width:100%"
@keydown=${this._handleSearchKeyDown}
></et2-searchbox>
${edit}
`;
}
@ -363,7 +367,7 @@ export const Et2WithSearchMixin = <T extends Constructor<LitElement>>(superclass
protected get _searchInputNode() : HTMLInputElement
{
return this._activeControls.querySelector("input#search");
return this._activeControls.querySelector("#search");
}
protected get _editInputNode() : HTMLInputElement
@ -426,7 +430,6 @@ export const Et2WithSearchMixin = <T extends Constructor<LitElement>>(superclass
protected _bindListeners()
{
this.addEventListener("sl-blur", this._handleSearchAbort);
this.addEventListener("sl-select", this._handleSelect);
this.addEventListener("sl-clear", this._handleClear)
@ -444,7 +447,6 @@ export const Et2WithSearchMixin = <T extends Constructor<LitElement>>(superclass
protected _unbindListeners()
{
this.removeEventListener("sl-blur", this._handleSearchAbort);
this.removeEventListener("sl-select", this._handleSelect);
this.removeEventListener("sl-clear", this._handleClear)
this.removeEventListener("change", this._handleChange);
@ -473,6 +475,14 @@ export const Et2WithSearchMixin = <T extends Constructor<LitElement>>(superclass
}
}
focus()
{
this.dropdown?.show().then(() =>
{
this._searchInputNode.focus();
});
}
handleMenuHide()
{
if(this.readonly)

3
api/js/etemplate/Et2Textbox/Et2Searchbox.ts
View File

@ -76,6 +76,9 @@ export class Et2Searchbox extends Et2Textbox
this.value = '';
this._oldChange(event);
// Call super so it works as expected
super.handleClearClick(event);
}
}
// @ts-ignore TypeScript is not recognizing that this is a LitElement