fix: only close combo-box overlay on blur from keyboard (#7554) (#7559)

Co-authored-by: Serhii Kulykov <[email protected]>

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

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';
@@ -1336,7 +1336,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();
+        }
       }
     }
 

packages/combo-box/test/interactions.common.js

@@ -9,6 +9,7 @@ import {
   nextRender,
   nextUpdate,
   outsideClick,
+  tabKeyDown,
   tap,
   touchstart,
 } from '@vaadin/testing-helpers';
@@ -58,7 +59,8 @@ describe('interactions', () => {
       expect(comboBox.opened).to.be.false;
     });
 
-    it('should close the when focus is lost', () => {
+    it('should close when focus is lost from keyboard', () => {
+      tabKeyDown(input);
       focusout(input);
 
       expect(comboBox.opened).to.be.false;

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