From 2deab6561364a991f99a9b60432cc62fe34bce3c Mon Sep 17 00:00:00 2001
From: Serhii Kulykov <iamkulykov@gmail.com>
Date: Tue, 10 Dec 2024 14:50:32 +0200
Subject: [PATCH] fix: do not fire custom-value-set on input blur or outside
 click (#8308)

---
 ...n-multi-select-combo-box-internal-mixin.js | 15 +++++++++++++++
 .../test/basic.common.js                      | 19 ++++++++++++++++++-
 .../test/selecting-items.common.js            | 15 +++++++++++++++
 3 files changed, 48 insertions(+), 1 deletion(-)

diff --git a/packages/multi-select-combo-box/src/vaadin-multi-select-combo-box-internal-mixin.js b/packages/multi-select-combo-box/src/vaadin-multi-select-combo-box-internal-mixin.js
index aef78fa0dc8..8959b471fdf 100644
--- a/packages/multi-select-combo-box/src/vaadin-multi-select-combo-box-internal-mixin.js
+++ b/packages/multi-select-combo-box/src/vaadin-multi-select-combo-box-internal-mixin.js
@@ -121,6 +121,12 @@ export const MultiSelectComboBoxInternalMixin = (superClass) =>
       return 'vaadin-multi-select-combo-box';
     }
 
+    constructor() {
+      super();
+
+      this.addEventListener('custom-value-set', this.__onCustomValueSet.bind(this));
+    }
+
     /**
      * Override method inherited from the combo-box
      * to allow opening dropdown when readonly.
@@ -435,4 +441,13 @@ export const MultiSelectComboBoxInternalMixin = (superClass) =>
 
       super.clearCache();
     }
+
+    /** @private */
+    __onCustomValueSet(event) {
+      // Prevent setting custom value on input blur or outside click,
+      // so it can be only committed explicitly by pressing Enter.
+      if (this._ignoreCommitValue) {
+        event.stopImmediatePropagation();
+      }
+    }
   };
diff --git a/packages/multi-select-combo-box/test/basic.common.js b/packages/multi-select-combo-box/test/basic.common.js
index 287fc51266e..698a46683f4 100644
--- a/packages/multi-select-combo-box/test/basic.common.js
+++ b/packages/multi-select-combo-box/test/basic.common.js
@@ -1,6 +1,6 @@
 import { expect } from '@vaadin/chai-plugins';
 import { fixtureSync, nextFrame, nextRender } from '@vaadin/testing-helpers';
-import { sendKeys } from '@web/test-runner-commands';
+import { resetMouse, sendKeys, sendMouse } from '@web/test-runner-commands';
 import sinon from 'sinon';
 import { isTouch } from '@vaadin/component-base/src/browser-utils.js';
 
@@ -331,6 +331,23 @@ describe('basic', () => {
       await sendKeys({ down: 'Enter' });
       expect(comboBox.selectedItems).to.deep.equal(['apple']);
     });
+
+    it('should not fire custom-value-set event when pressing Tab', async () => {
+      const spy = sinon.spy();
+      comboBox.addEventListener('custom-value-set', spy);
+      await sendKeys({ type: 'pear' });
+      await sendKeys({ down: 'Tab' });
+      expect(spy.called).to.be.false;
+    });
+
+    it('should not fire custom-value-set event on outside click', async () => {
+      const spy = sinon.spy();
+      comboBox.addEventListener('custom-value-set', spy);
+      await sendKeys({ type: 'ap' });
+      await sendMouse({ type: 'click', position: [200, 200] });
+      await resetMouse();
+      expect(spy.called).to.be.false;
+    });
   });
 
   describe('helper text', () => {
diff --git a/packages/multi-select-combo-box/test/selecting-items.common.js b/packages/multi-select-combo-box/test/selecting-items.common.js
index f0c59debea3..665fb5c2d57 100644
--- a/packages/multi-select-combo-box/test/selecting-items.common.js
+++ b/packages/multi-select-combo-box/test/selecting-items.common.js
@@ -157,6 +157,21 @@ describe('selecting items', () => {
       expect(inputElement.value).to.equal('');
     });
 
+    it('should not select an item on outside click when it is focused', async () => {
+      await sendKeys({ down: 'ArrowDown' });
+      await sendKeys({ down: 'ArrowDown' });
+      await sendMouse({ type: 'click', position: [200, 200] });
+      await resetMouse();
+      expect(comboBox.selectedItems).to.deep.equal([]);
+    });
+
+    it('should not select an item on blur when it is focused', async () => {
+      await sendKeys({ down: 'ArrowDown' });
+      await sendKeys({ down: 'ArrowDown' });
+      await sendKeys({ down: 'Tab' });
+      expect(comboBox.selectedItems).to.deep.equal([]);
+    });
+
     it('should un-select item when using clear() method', () => {
       comboBox.selectedItems = ['orange'];
       comboBox.clear();