Et2Select + Search: Fix change event fired while widget still had old value

The search box was firing its own change event, triggering the handler.  Now SearchMixin swallows that event preventing it from triggering.
This commit is contained in:
nathan 2022-06-23 10:36:54 -06:00
parent f2e20eddba
commit 1cc2cd5e3e

View File

@ -274,6 +274,7 @@ export const Et2WithSearchMixin = <T extends Constructor<LitElement>>(superclass
this.defaultValidators = [];
this._handleSelect = this._handleSelect.bind(this);
this._handleChange = this._handleChange.bind(this);
this._handleClear = this._handleClear.bind(this);
this._handleSearchButtonClick = this._handleSearchButtonClick.bind(this);
this._handleDoubleClick = this._handleDoubleClick.bind(this);
@ -379,7 +380,7 @@ export const Et2WithSearchMixin = <T extends Constructor<LitElement>>(superclass
return this.querySelector("sl-icon[slot='suffix']");
}
protected get _searchInputNode()
protected get _searchInputNode() : HTMLInputElement
{
return this._activeControls.querySelector("input#search");
}
@ -447,6 +448,15 @@ export const Et2WithSearchMixin = <T extends Constructor<LitElement>>(superclass
this.addEventListener("sl-blur", this._handleSearchAbort);
this.addEventListener("sl-select", this._handleSelect);
this.addEventListener("sl-clear", this._handleClear)
if(this._oldChange && this.onchange)
{
// Search messes up event order. Since it throws its own bubbling change event,
// selecting an option fires 2 change events - 1 before the widget is finished adjusting, losing the value
// We catch all change events, then call this._oldChange only when value changes
this.removeEventListener("change", this._oldChange);
this.addEventListener("change", this._handleChange);
}
this._searchButtonNode.addEventListener("click", this._handleSearchButtonClick);
}
@ -455,7 +465,7 @@ export const Et2WithSearchMixin = <T extends Constructor<LitElement>>(superclass
this.removeEventListener("sl-blur", this._handleSearchAbort);
this.removeEventListener("sl-select", this._handleSelect);
this.removeEventListener("sl-clear", this._handleClear)
this.removeEventListener("change", this._handleChange);
this._searchButtonNode.removeEventListener("click", this._handleSearchButtonClick);
}
@ -488,6 +498,18 @@ export const Et2WithSearchMixin = <T extends Constructor<LitElement>>(superclass
}
}
_handleChange(event)
{
if(event.target == this._searchInputNode)
{
event.stopImmediatePropagation();
event.preventDefault();
return false;
}
return this._oldChange(event);
}
_handleDoubleClick(event : MouseEvent)
{
// No edit (shouldn't happen...)