diff --git a/integration/tests/dialog-combo-box.test.js b/integration/tests/dialog-combo-box.test.js index a5480f9427..98a954a179 100644 --- a/integration/tests/dialog-combo-box.test.js +++ b/integration/tests/dialog-combo-box.test.js @@ -1,5 +1,13 @@ import { expect } from '@esm-bundle/chai'; -import { fixtureSync, mousedown, nextFrame, nextUpdate, oneEvent, touchstart } from '@vaadin/testing-helpers'; +import { + fixtureSync, + mousedown, + nextFrame, + nextUpdate, + oneEvent, + outsideClick, + touchstart, +} from '@vaadin/testing-helpers'; import { sendKeys } from '@web/test-runner-commands'; import './not-animated-styles.js'; import '@vaadin/combo-box'; @@ -27,20 +35,27 @@ describe('combo-box in dialog', () => { await nextUpdate(comboBox); }); - it('should not close the dialog when closing time-picker on input element Escape', async () => { + it('should not close the dialog when closing combo-box on input element Escape', async () => { await sendKeys({ press: 'Escape' }); expect(comboBox.opened).to.be.false; expect(dialog.opened).to.be.true; }); - it('should close the dialog on subsequent Escape after the time-picker is closed', async () => { + it('should close the dialog on subsequent Escape after the combo-box is closed', async () => { await sendKeys({ press: 'Escape' }); await sendKeys({ press: 'Escape' }); expect(dialog.opened).to.be.false; }); + + it('should not close the dialog when closing combo-box on outside click', () => { + outsideClick(); + + expect(comboBox.opened).to.be.false; + expect(dialog.opened).to.be.true; + }); }); describe('clear button visible', () => { diff --git a/packages/combo-box/src/vaadin-combo-box-mixin.js b/packages/combo-box/src/vaadin-combo-box-mixin.js index 6807059fe6..1c19de172a 100644 --- a/packages/combo-box/src/vaadin-combo-box-mixin.js +++ b/packages/combo-box/src/vaadin-combo-box-mixin.js @@ -5,7 +5,7 @@ */ import { DisabledMixin } from '@vaadin/a11y-base/src/disabled-mixin.js'; import { FocusMixin } from '@vaadin/a11y-base/src/focus-mixin.js'; -import { isElementFocused } from '@vaadin/a11y-base/src/focus-utils.js'; +import { isElementFocused, isKeyboardActive } from '@vaadin/a11y-base/src/focus-utils.js'; import { KeyboardMixin } from '@vaadin/a11y-base/src/keyboard-mixin.js'; import { isTouch } from '@vaadin/component-base/src/browser-utils.js'; import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js'; @@ -1282,7 +1282,19 @@ export const ComboBoxMixin = (subclass) => return; } - this._closeOrCommit(); + if (isKeyboardActive()) { + // Close on Tab key causing blur. With mouse, close on outside click instead. + this._closeOrCommit(); + return; + } + + if (!this.opened) { + this._commitValue(); + } else if (!this._overlayOpened) { + // Combo-box is opened, but overlay is not visible -> custom value was entered. + // Make sure we close here as there won't be an "outside click" in this case. + this.close(); + } } } diff --git a/packages/combo-box/test/toggling-dropdown.test.js b/packages/combo-box/test/toggling-dropdown.test.js index eeae158084..a02b36cc23 100644 --- a/packages/combo-box/test/toggling-dropdown.test.js +++ b/packages/combo-box/test/toggling-dropdown.test.js @@ -7,6 +7,7 @@ import { focusout, isIOS, outsideClick, + tabKeyDown, tap, touchstart, } from '@vaadin/testing-helpers'; @@ -244,9 +245,10 @@ describe('toggling dropdown', () => { expect(comboBox.opened).to.be.false; }); - it('should close the overlay when focus is lost', () => { + it('should close the overlay when focus is lost from keyboard', () => { comboBox.open(); + tabKeyDown(input); focusout(input); expect(comboBox.opened).to.be.false; diff --git a/packages/time-picker/src/vaadin-time-picker.js b/packages/time-picker/src/vaadin-time-picker.js index fec89beb6e..cde39be21e 100644 --- a/packages/time-picker/src/vaadin-time-picker.js +++ b/packages/time-picker/src/vaadin-time-picker.js @@ -459,8 +459,6 @@ class TimePicker extends PatternMixin(InputControlMixin(ThemableMixin(ElementMix super._setFocused(focused); if (!focused) { - this.__commitValueChange(); - // Do not validate when focusout is caused by document // losing focus, which happens on browser tab switch. if (document.hasFocus()) {