Thoroughly remove search icon, not just hide it.

This commit is contained in:
nathan 2022-07-14 14:17:50 -06:00
parent 78f58a5503
commit 0034a8fe1c

View File

@ -102,34 +102,12 @@ export const Et2WithSearchMixin = <T extends Constructor<LitElement>>(superclass
} }
} }
get slots()
{
return {
...super.slots,
suffix: () =>
{
const input = document.createElement("sl-icon");
input.name = "search";
return input;
}
}
}
static get styles() static get styles()
{ {
return [ return [
// @ts-ignore // @ts-ignore
...(super.styles ? (Symbol.iterator in Object(super.styles) ? super.styles : [super.styles]) : []), ...(super.styles ? (Symbol.iterator in Object(super.styles) ? super.styles : [super.styles]) : []),
css` css`
/* This is the search icon on the right - hidden unless search=true */
::slotted(sl-icon[slot="suffix"]) {
font-size: 120% !important;
display:none;
}
:host([search]:not([readonly])) ::slotted(sl-icon[slot="suffix"]) {
display: hidden;
}
/* Move the widget border */ /* Move the widget border */
.form-control-input { .form-control-input {
border: solid var(--sl-input-border-width) var(--sl-input-border-color); border: solid var(--sl-input-border-width) var(--sl-input-border-color);
@ -276,7 +254,6 @@ export const Et2WithSearchMixin = <T extends Constructor<LitElement>>(superclass
this._handleSelect = this._handleSelect.bind(this); this._handleSelect = this._handleSelect.bind(this);
this._handleChange = this._handleChange.bind(this); this._handleChange = this._handleChange.bind(this);
this._handleClear = this._handleClear.bind(this); this._handleClear = this._handleClear.bind(this);
this._handleSearchButtonClick = this._handleSearchButtonClick.bind(this);
this._handleDoubleClick = this._handleDoubleClick.bind(this); this._handleDoubleClick = this._handleDoubleClick.bind(this);
this._handleSearchAbort = this._handleSearchAbort.bind(this); this._handleSearchAbort = this._handleSearchAbort.bind(this);
this._handleSearchKeyDown = this._handleSearchKeyDown.bind(this); this._handleSearchKeyDown = this._handleSearchKeyDown.bind(this);
@ -375,11 +352,6 @@ export const Et2WithSearchMixin = <T extends Constructor<LitElement>>(superclass
return !this.readonly && (this.search || this.searchUrl.length > 0); return !this.readonly && (this.search || this.searchUrl.length > 0);
} }
protected get _searchButtonNode()
{
return this.querySelector("sl-icon[slot='suffix']");
}
protected get _searchInputNode() : HTMLInputElement protected get _searchInputNode() : HTMLInputElement
{ {
return this._activeControls.querySelector("input#search"); return this._activeControls.querySelector("input#search");
@ -459,8 +431,6 @@ export const Et2WithSearchMixin = <T extends Constructor<LitElement>>(superclass
// We catch all change events, then call this._oldChange only when value changes // We catch all change events, then call this._oldChange only when value changes
this.removeEventListener("change", this._oldChange); this.removeEventListener("change", this._oldChange);
}); });
this._searchButtonNode.addEventListener("click", this._handleSearchButtonClick);
} }
protected _unbindListeners() protected _unbindListeners()
@ -469,7 +439,6 @@ export const Et2WithSearchMixin = <T extends Constructor<LitElement>>(superclass
this.removeEventListener("sl-select", this._handleSelect); this.removeEventListener("sl-select", this._handleSelect);
this.removeEventListener("sl-clear", this._handleClear) this.removeEventListener("sl-clear", this._handleClear)
this.removeEventListener("change", this._handleChange); this.removeEventListener("change", this._handleChange);
this._searchButtonNode.removeEventListener("click", this._handleSearchButtonClick);
} }
handleMenuShow() handleMenuShow()
@ -655,10 +624,9 @@ export const Et2WithSearchMixin = <T extends Constructor<LitElement>>(superclass
// Stop timeout timer // Stop timeout timer
clearTimeout(this._searchTimeout); clearTimeout(this._searchTimeout);
// Show a spinner instead of search button // Show a spinner
this._searchButtonNode.style.display = "hidden";
let spinner = document.createElement("sl-spinner"); let spinner = document.createElement("sl-spinner");
spinner.slot = this._searchButtonNode.slot; spinner.slot = "suffix";
this.appendChild(spinner); this.appendChild(spinner);
// Start the searches // Start the searches
@ -906,11 +874,6 @@ export const Et2WithSearchMixin = <T extends Constructor<LitElement>>(superclass
} }
} }
protected _handleSearchButtonClick(e)
{
this.handleMenuShow();
}
protected _handleSearchAbort(e) protected _handleSearchAbort(e)
{ {
this._activeControls.classList.remove("active"); this._activeControls.classList.remove("active");