diff --git a/packages/uui-combobox-list/lib/uui-combobox-list.element.ts b/packages/uui-combobox-list/lib/uui-combobox-list.element.ts index a1632f30b..32d2fa229 100644 --- a/packages/uui-combobox-list/lib/uui-combobox-list.element.ts +++ b/packages/uui-combobox-list/lib/uui-combobox-list.element.ts @@ -207,7 +207,7 @@ export class UUIComboboxListElement extends LitElement { private _onKeyDown = (e: KeyboardEvent) => { if (this._options.length <= 0) return; - switch (e.key) { + switch (e.code) { case 'ArrowUp': e.preventDefault(); if (e.ctrlKey) { @@ -239,6 +239,14 @@ export class UUIComboboxListElement extends LitElement { break; } + //Space key + case 'Space': { + e.preventDefault(); + e.stopPropagation(); + this._getActiveElement?.click(); + break; + } + case 'End': { e.preventDefault(); this._goToIndex(this._options.length - 1); diff --git a/packages/uui-combobox/lib/uui-combobox.element.ts b/packages/uui-combobox/lib/uui-combobox.element.ts index 2d581a0e6..d923d5388 100644 --- a/packages/uui-combobox/lib/uui-combobox.element.ts +++ b/packages/uui-combobox/lib/uui-combobox.element.ts @@ -298,16 +298,23 @@ export class UUIComboboxElement extends UUIFormControlMixin(LitElement, '') { }; #onKeyDown = (e: KeyboardEvent) => { - if (this.open === false && e.key === 'Enter') { + if (this.open === false && e.code === 'Enter') { e.preventDefault(); // TODO: could we avoid this. e.stopImmediatePropagation(); // TODO: could we avoid this. } - if (e.key === 'ArrowUp' || e.key === 'ArrowDown') { + if (e.code === 'ArrowUp' || e.code === 'ArrowDown') { this.#onOpen(); } - if (e.key === 'Escape' || e.key === 'Enter') { + if (e.code === 'Space') { + if (this._isOpen) return; + e.preventDefault(); + e.stopImmediatePropagation(); + this.#onOpen(); + } + + if (e.code === 'Escape' || e.code === 'Enter') { this.#onClose(); } }; diff --git a/packages/uui-combobox/lib/uui-combobox.test.ts b/packages/uui-combobox/lib/uui-combobox.test.ts index 62ad53fe1..7602c90fb 100644 --- a/packages/uui-combobox/lib/uui-combobox.test.ts +++ b/packages/uui-combobox/lib/uui-combobox.test.ts @@ -123,8 +123,12 @@ describe('UUIComboboxElement', () => { describe('keyboard navigation', () => { it('moves `active`-focus to second option on pressing the arrow down key', async () => { - element.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' })); - element.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' })); + element.dispatchEvent( + new KeyboardEvent('keydown', { key: 'ArrowDown', code: 'ArrowDown' }), + ); + element.dispatchEvent( + new KeyboardEvent('keydown', { key: 'ArrowDown', code: 'ArrowDown' }), + ); await elementUpdated(element);