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

Author: web-padawan

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();
+      }
+    }
   };

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', () => {

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();