From 3efbb5e76bb47bb5731920464cc426d890e3e616 Mon Sep 17 00:00:00 2001
From: Serhii Kulykov <iamkulykov@gmail.com>
Date: Wed, 11 Dec 2024 09:56:22 +0200
Subject: [PATCH] fix: do not fire custom-value-set on input blur or outside
 click (#8308) (#8315)

---
 .../vaadin-multi-select-combo-box-internal.js | 15 +++++++++++++++
 .../multi-select-combo-box/test/basic.test.js | 19 ++++++++++++++++++-
 .../test/selecting-items.test.js              | 17 ++++++++++++++++-
 3 files changed, 49 insertions(+), 2 deletions(-)

diff --git a/packages/multi-select-combo-box/src/vaadin-multi-select-combo-box-internal.js b/packages/multi-select-combo-box/src/vaadin-multi-select-combo-box-internal.js
index 184c8f0e05e..09c3434a3bf 100644
--- a/packages/multi-select-combo-box/src/vaadin-multi-select-combo-box-internal.js
+++ b/packages/multi-select-combo-box/src/vaadin-multi-select-combo-box-internal.js
@@ -150,6 +150,12 @@ class MultiSelectComboBoxInternal extends ComboBoxDataProviderMixin(ComboBoxMixi
     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.
@@ -442,6 +448,15 @@ class MultiSelectComboBoxInternal extends ComboBoxDataProviderMixin(ComboBoxMixi
 
     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();
+    }
+  }
 }
 
 defineCustomElement(MultiSelectComboBoxInternal);
diff --git a/packages/multi-select-combo-box/test/basic.test.js b/packages/multi-select-combo-box/test/basic.test.js
index 9a699821089..ecd887a20d5 100644
--- a/packages/multi-select-combo-box/test/basic.test.js
+++ b/packages/multi-select-combo-box/test/basic.test.js
@@ -1,6 +1,6 @@
 import { expect } from '@esm-bundle/chai';
 import { fixtureSync, 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 './not-animated-styles.js';
 import '../vaadin-multi-select-combo-box.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.test.js b/packages/multi-select-combo-box/test/selecting-items.test.js
index 6d59980baea..31484ea7f77 100644
--- a/packages/multi-select-combo-box/test/selecting-items.test.js
+++ b/packages/multi-select-combo-box/test/selecting-items.test.js
@@ -1,6 +1,6 @@
 import { expect } from '@esm-bundle/chai';
 import { fixtureSync, keyboardEventFor, 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 './not-animated-styles.js';
 import '../vaadin-multi-select-combo-box.js';
@@ -138,6 +138,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();