fix: detect item correctly when clicking item content (#7371)

vaadin · May 2, 2024 · 3c32fbe · 3c32fbe
1 parent 504787f
commit 3c32fbe
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/packages/select/src/vaadin-select-base-mixin.js b/packages/select/src/vaadin-select-base-mixin.js
@@ -256,8 +256,8 @@ export const SelectBaseMixin = (superClass) =>
         menuElement.addEventListener(
           'click',
           (e) => {
-            const value = e.target.value;
-            this.__dispatchChangePending = value !== undefined && value !== this.value;
+            const item = e.composedPath().find((el) => el._hasVaadinItemMixin);
+            this.__dispatchChangePending = Boolean(item && item.value !== undefined && item.value !== this.value);
             this.opened = false;
           },
           true,

diff --git a/packages/select/test/select.common.js b/packages/select/test/select.common.js
@@ -96,7 +96,7 @@ describe('vaadin-select', () => {
           html`
             <vaadin-list-box>
               <vaadin-item>Option 1</vaadin-item>
-              <vaadin-item value="v2" label="o2">Option 2</vaadin-item>
+              <vaadin-item value="v2" label="o2"><span>Option 2</span></vaadin-item>
               <vaadin-item value="">Option 3</vaadin-item>
               <vaadin-item></vaadin-item>
               <vaadin-item label="">Empty</vaadin-item>
@@ -617,6 +617,15 @@ describe('vaadin-select', () => {
         expect(changeSpy.callCount).to.equal(1);
       });
 
+      it('should fire `change` event when value changes by user clicking the element inside item', async () => {
+        select.opened = true;
+        await nextUpdate(select);
+        const span = menu.children[1].firstElementChild;
+        span.click();
+        await nextUpdate(select);
+        expect(changeSpy).to.be.calledOnce;
+      });
+
       it('should fire `change` event when value changes by user selecting item with keyboard', async () => {
         select.opened = true;
         await nextUpdate(select);