From 44c99f1a1dad99c098b3f089960b4c816ff2dd39 Mon Sep 17 00:00:00 2001
From: Vaadin Bot <vaadin-bot@users.noreply.github.com>
Date: Fri, 3 May 2024 08:48:30 +0200
Subject: [PATCH] fix: detect item correctly when clicking item content (#7371)
 (#7373)

Co-authored-by: Serhii Kulykov <iamkulykov@gmail.com>
---
 packages/select/src/vaadin-select-base-mixin.js |  4 ++--
 packages/select/test/select.common.js           | 11 ++++++++++-
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/packages/select/src/vaadin-select-base-mixin.js b/packages/select/src/vaadin-select-base-mixin.js
index 3ad874614e..ae9502bdf4 100644
--- 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
index a8e55ec645..56968cd15d 100644
--- 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);