fix: close select overlay when clicking already selected item (#7288) (…

…#7290) Co-authored-by: Serhii Kulykov <iamkulykov@gmail.com>
vaadin · Mar 28, 2024 · a7f23ac · a7f23ac
1 parent 2993bcc
commit a7f23ac
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 3 deletions.
diff --git a/packages/select/src/vaadin-select-base-mixin.js b/packages/select/src/vaadin-select-base-mixin.js
@@ -259,8 +259,10 @@ export const SelectBaseMixin = (superClass) =>
         menuElement.addEventListener('keydown', (e) => this._onKeyDownInside(e), true);
         menuElement.addEventListener(
           'click',
-          () => {
-            this.__dispatchChangePending = true;
+          (e) => {
+            const value = e.target.value;
+            this.__dispatchChangePending = value !== undefined && value !== this.value;
+            this.opened = false;
           },
           true,
         );
@@ -523,7 +525,6 @@ export const SelectBaseMixin = (superClass) =>
           this._selectedChanging = true;
           this.value = selected.value || '';
           if (this.__dispatchChangePending) {
-            this.opened = false;
             this.__dispatchChange();
           }
           delete this._selectedChanging;

diff --git a/packages/select/test/select.common.js b/packages/select/test/select.common.js
@@ -132,6 +132,18 @@ describe('vaadin-select', () => {
         expect(select._overlayElement.opened).to.be.false;
       });
 
+      it('should close the overlay when clicking an already selected item', async () => {
+        click(select._items[1]);
+        await nextUpdate(select);
+
+        select.opened = true;
+        await nextRender();
+
+        click(select._items[1]);
+        await nextUpdate(select);
+        expect(select._overlayElement.opened).to.be.false;
+      });
+
       it('should preserve the selected attribute when selecting the disabled item', async () => {
         menu.selected = 5;
         await nextUpdate(select);