Et2Select: In some cases the change event from the search input was triggering an extra widget change event

This commit is contained in:
nathan 2022-07-06 11:20:53 -06:00
parent 6fb464d90b
commit 46b172c88e
2 changed files with 9 additions and 12 deletions

View File

@ -146,7 +146,6 @@ export class Et2Select extends Et2WithSearchMixin(Et2WidgetWithSelect)
this.updateComplete.then(() => this.updateComplete.then(() =>
{ {
this.addEventListener("sl-clear", this._triggerChange)
this.addEventListener("sl-change", this._triggerChange); this.addEventListener("sl-change", this._triggerChange);
this.addEventListener("sl-after-show", this._doResize) this.addEventListener("sl-after-show", this._doResize)
}); });

View File

@ -448,18 +448,16 @@ export const Et2WithSearchMixin = <T extends Constructor<LitElement>>(superclass
this.addEventListener("sl-blur", this._handleSearchAbort); this.addEventListener("sl-blur", this._handleSearchAbort);
this.addEventListener("sl-select", this._handleSelect); this.addEventListener("sl-select", this._handleSelect);
this.addEventListener("sl-clear", this._handleClear) this.addEventListener("sl-clear", this._handleClear)
if(this._oldChange && this.onchange) this.updateComplete.then(() =>
{ {
this.updateComplete.then(() => // 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
// Search messes up event order. Since it throws its own bubbling change event, // We catch all change events, then call this._oldChange only when value changes
// selecting an option fires 2 change events - 1 before the widget is finished adjusting, losing the value this.removeEventListener("change", this._oldChange);
// We catch all change events, then call this._oldChange only when value changes // Need our own change to catch the change event from search input
this.removeEventListener("change", this._oldChange); this.addEventListener("change", this._handleChange);
this.addEventListener("change", this._handleChange); });
});
}
this._searchButtonNode.addEventListener("click", this._handleSearchButtonClick); this._searchButtonNode.addEventListener("click", this._handleSearchButtonClick);
} }