From 07264c3000e7e17034fc4897faadf6a412536ba4 Mon Sep 17 00:00:00 2001
From: Vaadin Bot <vaadin-bot@users.noreply.github.com>
Date: Wed, 17 Jul 2024 14:01:13 +0200
Subject: [PATCH] fix: only close combo-box overlay on blur from keyboard
 (#7554) (#7559)

Co-authored-by: Serhii Kulykov <iamkulykov@gmail.com>
---
 integration/tests/dialog-combo-box.test.js    | 21 ++++++++++++++++---
 .../combo-box/src/vaadin-combo-box-mixin.js   | 16 ++++++++++++--
 .../combo-box/test/interactions.common.js     |  4 +++-
 .../time-picker/src/vaadin-time-picker.js     |  2 --
 4 files changed, 35 insertions(+), 8 deletions(-)

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 fdc223832c..097b19e785 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';
@@ -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();
+        }
       }
     }
 
diff --git a/packages/combo-box/test/interactions.common.js b/packages/combo-box/test/interactions.common.js
index 0a78eb8789..28b34a4ddd 100644
--- a/packages/combo-box/test/interactions.common.js
+++ b/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;
diff --git a/packages/time-picker/src/vaadin-time-picker.js b/packages/time-picker/src/vaadin-time-picker.js
index fa67ea138d..42c4de392f 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()) {