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 e13b7b8a0e4..ea23cfa3239 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 @@ -361,6 +361,19 @@ class MultiSelectComboBoxInternal extends ComboBoxDataProviderMixin(ComboBoxMixi } } + /** + * 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 @@ -373,7 +386,7 @@ class MultiSelectComboBoxInternal extends ComboBoxDataProviderMixin(ComboBoxMixi this._ignoreCommitValue = false; // Reset internal combo-box state - this.selectedItem = null; + this.clear(); this._inputElementValue = ''; return; } 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 d00c36a951d..8b41daf61bf 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 '@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 './not-animated-styles.js'; import '../vaadin-multi-select-combo-box.js'; @@ -128,6 +128,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();