diff --git a/api/js/etemplate/Et2Select/Et2Select.ts b/api/js/etemplate/Et2Select/Et2Select.ts index 0ac613b534..ace7433274 100644 --- a/api/js/etemplate/Et2Select/Et2Select.ts +++ b/api/js/etemplate/Et2Select/Et2Select.ts @@ -251,6 +251,7 @@ export class Et2Select extends Et2WithSearchMixin(Et2WidgetWithSelect) this._handleMouseWheel = this._handleMouseWheel.bind(this); this._handleMouseEnter = this._handleMouseEnter.bind(this); this._handleMouseLeave = this._handleMouseLeave.bind(this); + this.handleOptionClick = this.handleOptionClick.bind(this); this.handleTagRemove = this.handleTagRemove.bind(this); } @@ -266,6 +267,7 @@ export class Et2Select extends Et2WithSearchMixin(Et2WidgetWithSelect) this.addEventListener("mousewheel", this._handleMouseWheel); this.addEventListener("mouseenter", this._handleMouseEnter); + this.addEventListener("mouseup", this.handleOptionClick); this.updateComplete.then(() => { @@ -668,6 +670,25 @@ export class Et2Select extends Et2WithSearchMixin(Et2WidgetWithSelect) } } + /** + * Always close the dropdown if an option is clicked, even if multiple=true. This differs from SlSelect, + * which leaves the dropdown open for multiple=true + * + * @param {MouseEvent} event + * @private + */ + private handleOptionClick(event : MouseEvent) + { + this.dropdown.hide().then(() => + { + if(typeof this.handleMenuHide == "function") + { + // Make sure search gets hidden + this.handleMenuHide(); + } + }); + } + /** * Get the icon for the select option *