Select + search improvements

- Use et2-search widget with clearable for search
- Add focus(), which opens & focuses search

api/js/etemplate/Et2Select/SearchMixin.ts

@@ -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)

api/js/etemplate/Et2Textbox/Et2Searchbox.ts

@@ -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