fix: prevent unselecting already committed value on outside click (#8301)

Author: web-padawan

packages/multi-select-combo-box/src/vaadin-multi-select-combo-box-internal-mixin.js

@@ -341,6 +341,19 @@ export const MultiSelectComboBoxInternalMixin = (superClass) =>
       }
     }
 
+    /**
+     * Override method inherited from the combo-box
+     * to not commit an already selected item again
+     * after closing overlay on outside click.
+     * @protected
+     * @override
+     */
+    _onClosed() {
+      this._ignoreCommitValue = true;
+
+      super._onClosed();
+    }
+
     /**
      * Override method inherited from the combo-box
      * to not commit an already selected item again
@@ -353,7 +366,7 @@ export const MultiSelectComboBoxInternalMixin = (superClass) =>
         this._ignoreCommitValue = false;
 
         // Reset internal combo-box state
-        this.selectedItem = null;
+        this.clear();
         this._inputElementValue = '';
         return;
       }

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

@@ -1,6 +1,6 @@
 import { expect } from '@vaadin/chai-plugins';
 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 { getAllItems, getDataProvider, getFirstItem } from './helpers.js';
 
@@ -127,6 +127,36 @@ describe('selecting items', () => {
       expect(comboBox.selectedItems).to.deep.equal(['apple']);
     });
 
+    it('should not unselect previously committed item on outside click', async () => {
+      await sendKeys({ down: 'ArrowDown' });
+      await sendKeys({ down: 'ArrowDown' });
+      await sendKeys({ down: 'Enter' });
+      await sendMouse({ type: 'click', position: [200, 200] });
+      await resetMouse();
+      expect(comboBox.selectedItems).to.deep.equal(['apple']);
+    });
+
+    it('should not unselect previously committed item on blur after outside click with allow custom value', async () => {
+      comboBox.allowCustomValue = true;
+      await sendKeys({ down: 'ArrowDown' });
+      await sendKeys({ down: 'ArrowDown' });
+      await sendKeys({ down: 'Enter' });
+      await sendMouse({ type: 'click', position: [200, 200] });
+      await resetMouse();
+      await sendKeys({ down: 'Tab' });
+      expect(comboBox.selectedItems).to.deep.equal(['apple']);
+    });
+
+    it('should not set previously committed item to input on blur with allow custom value', async () => {
+      comboBox.allowCustomValue = true;
+      await sendKeys({ down: 'ArrowDown' });
+      await sendKeys({ down: 'ArrowDown' });
+      await sendKeys({ down: 'Enter' });
+      await sendKeys({ down: 'Tab' });
+      expect(comboBox.filter).to.equal('');
+      expect(inputElement.value).to.equal('');
+    });
+
     it('should un-select item when using clear() method', () => {
       comboBox.selectedItems = ['orange'];
       comboBox.clear();