From 5614870a29194b93a29c0e974d5be1ce7a88e112 Mon Sep 17 00:00:00 2001 From: nathan Date: Thu, 23 Mar 2023 16:02:09 -0600 Subject: [PATCH] Et2Select: Always close the dropdown after an option is selected, even if multiple=true. Now for keypresses too. see 62402f39ae4f1e15e6bb40d5b3fac084a4654db9 --- api/js/etemplate/Et2Select/Et2Select.ts | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/api/js/etemplate/Et2Select/Et2Select.ts b/api/js/etemplate/Et2Select/Et2Select.ts index ace7433274..66e117cc98 100644 --- a/api/js/etemplate/Et2Select/Et2Select.ts +++ b/api/js/etemplate/Et2Select/Et2Select.ts @@ -252,6 +252,7 @@ export class Et2Select extends Et2WithSearchMixin(Et2WidgetWithSelect) this._handleMouseEnter = this._handleMouseEnter.bind(this); this._handleMouseLeave = this._handleMouseLeave.bind(this); this.handleOptionClick = this.handleOptionClick.bind(this); + this.handleKeyDown = this.handleKeyDown.bind(this); this.handleTagRemove = this.handleTagRemove.bind(this); } @@ -268,6 +269,7 @@ export class Et2Select extends Et2WithSearchMixin(Et2WidgetWithSelect) this.addEventListener("mousewheel", this._handleMouseWheel); this.addEventListener("mouseenter", this._handleMouseEnter); this.addEventListener("mouseup", this.handleOptionClick); + this.addEventListener("keyup", this.handleKeyDown); this.updateComplete.then(() => { @@ -689,6 +691,29 @@ 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 {KeyboardEvent} event + * @private + */ + private handleKeyDown(event : KeyboardEvent) + { + if(event.key === 'Enter' || (event.key === ' ' && this.typeToSelectString === '')) + { + this.dropdown.hide().then(() => + { + if(typeof this.handleMenuHide == "function") + { + // Make sure search gets hidden + this.handleMenuHide(); + } + }); + } + + } + /** * Get the icon for the select option *