fix: do not fire custom-value-set on input blur or outside click (#8308) (CP: 24.5)

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.
@@ -455,6 +461,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);

packages/multi-select-combo-box/test/basic.test.js

@@ -1,6 +1,6 @@
 import { expect } from '@vaadin/chai-plugins';
 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';
@@ -337,6 +337,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', () => {

packages/multi-select-combo-box/test/selecting-items.test.js

@@ -158,6 +158,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();