fix(combobox): close on tab keydown (not keyup)

This commit is contained in:
Thijs Louisse 2021-04-20 11:55:10 +02:00
parent 22678f13ce
commit 5da55af6cd
2 changed files with 10 additions and 2 deletions

View file

@ -470,7 +470,13 @@ export class LionCombobox extends OverlayMixin(LionListbox) {
* @protected * @protected
*/ */
// eslint-disable-next-line class-methods-use-this, no-unused-vars // 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 * @param {MouseEvent} ev

View file

@ -592,7 +592,9 @@ describe('lion-combobox', () => {
expect(el.opened).to.equal(true); expect(el.opened).to.equal(true);
expect(_inputNode.value).to.equal('Artichoke'); 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(el.opened).to.equal(false);
expect(_inputNode.value).to.equal('Artichoke'); expect(_inputNode.value).to.equal('Artichoke');
}); });