From 5da55af6cde9952440cbb3c86b6a26c47a535d2d Mon Sep 17 00:00:00 2001
From: Thijs Louisse <Thijs.Louisse@ing.com>
Date: Tue, 20 Apr 2021 11:55:10 +0200
Subject: [PATCH] fix(combobox): close on tab keydown (not keyup)

---
 packages/combobox/src/LionCombobox.js        | 8 +++++++-
 packages/combobox/test/lion-combobox.test.js | 4 +++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/combobox/src/LionCombobox.js b/packages/combobox/src/LionCombobox.js
index e9e254aeb..9ecfdf41b 100644
--- a/packages/combobox/src/LionCombobox.js
+++ b/packages/combobox/src/LionCombobox.js
@@ -470,7 +470,13 @@ export class LionCombobox extends OverlayMixin(LionListbox) {
    * @protected
    */
   // eslint-disable-next-line class-methods-use-this, no-unused-vars
-  _textboxOnKeydown(ev) {}
+  _textboxOnKeydown(ev) {
+    // N.B. the check in _showOverlayCondition() is on keyup, and there is a subtle difference
+    // (see tests)
+    if (ev.key === 'Tab') {
+      this.opened = false;
+    }
+  }
 
   /**
    * @param {MouseEvent} ev
diff --git a/packages/combobox/test/lion-combobox.test.js b/packages/combobox/test/lion-combobox.test.js
index 12d0a827c..563b6615e 100644
--- a/packages/combobox/test/lion-combobox.test.js
+++ b/packages/combobox/test/lion-combobox.test.js
@@ -592,7 +592,9 @@ describe('lion-combobox', () => {
       expect(el.opened).to.equal(true);
       expect(_inputNode.value).to.equal('Artichoke');
 
-      mimicKeyPress(_inputNode, 'Tab');
+      // N.B. we do only trigger keydown here (and not mimicKeypress (both keyup and down)),
+      // because this closely mimics what happens in the browser
+      _inputNode.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab' }));
       expect(el.opened).to.equal(false);
       expect(_inputNode.value).to.equal('Artichoke');
     });