Et2Select + search fixes

- Fix multiple=false had gap between widget and dropdown
- Add clearSearch() to clear the (remote) search results
This commit is contained in:
nathan 2022-09-07 08:40:46 -06:00
parent 8d7fdcf968
commit 151df0f76b

View File

@ -513,7 +513,7 @@ export const Et2WithSearchMixin = <T extends Constructor<LitElement>>(superclass
return;
}
// Move search (& menu) if there's no value
this._activeControls?.classList.toggle("novalue", this.multiple && this.value == '');
this._activeControls?.classList.toggle("novalue", this.multiple && this.value == '' || !this.multiple);
this.dropdown?.setAttribute("distance",
!this._activeControls || this._activeControls?.classList.contains("novalue") ?
"" :
@ -753,6 +753,35 @@ export const Et2WithSearchMixin = <T extends Constructor<LitElement>>(superclass
});
}
/**
* Clear search term and any search results
*
* Local options are not removed, but remote options are
*/
public clearSearch()
{
// Stop timeout timer
clearTimeout(this._searchTimeout);
// Remove remote options
let target = this._optionTargetNode || this;
target.querySelectorAll(".remote").forEach(o => o.remove());
// Reset remaining options. It might be faster to re-create instead.
this._menuItems.forEach((item) =>
{
item.disabled = false;
item.classList.remove("match");
item.classList.remove("no-match");
});
// Clear search term
if(this._searchInputNode)
{
this._searchInputNode.value = "";
}
}
/**
* Filter the local options
*
@ -996,15 +1025,7 @@ export const Et2WithSearchMixin = <T extends Constructor<LitElement>>(superclass
protected _handleSearchAbort(e)
{
this._activeControls.classList.remove("active");
this._searchInputNode.value = "";
// Reset options. It might be faster to re-create instead.
this._menuItems.forEach((item) =>
{
item.disabled = false;
item.classList.remove("match");
item.classList.remove("no-match");
})
this.clearSearch();
this.syncItemsFromValue();
}