From 1cc2cd5e3e77e874372ab705371847dc384705aa Mon Sep 17 00:00:00 2001 From: nathan Date: Thu, 23 Jun 2022 10:36:54 -0600 Subject: [PATCH] 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. --- api/js/etemplate/Et2Select/SearchMixin.ts | 26 +++++++++++++++++++++-- 1 file changed, 24 insertions(+), 2 deletions(-) diff --git a/api/js/etemplate/Et2Select/SearchMixin.ts b/api/js/etemplate/Et2Select/SearchMixin.ts index 699e43944e..769e92d0dc 100644 --- a/api/js/etemplate/Et2Select/SearchMixin.ts +++ b/api/js/etemplate/Et2Select/SearchMixin.ts @@ -274,6 +274,7 @@ export const Et2WithSearchMixin = >(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 = >(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 = >(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 = >(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 = >(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...)