From 98c5c8870d42ccaaea38c00325b50a9ada717baa Mon Sep 17 00:00:00 2001 From: engjlr Date: Mon, 11 Aug 2025 14:41:32 +0200 Subject: [PATCH 1/6] fix(uui-combobox): Add open functionality with space bar --- .../uui-combobox-list/lib/uui-combobox-list.element.ts | 10 ++++++++++ packages/uui-combobox/lib/uui-combobox.element.ts | 7 +++++++ 2 files changed, 17 insertions(+) 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..ef8f42cbc 100644 --- a/packages/uui-combobox-list/lib/uui-combobox-list.element.ts +++ b/packages/uui-combobox-list/lib/uui-combobox-list.element.ts @@ -239,6 +239,16 @@ export class UUIComboboxListElement extends LitElement { break; } + //Space key + case ' ': { + const el = e.target as HTMLInputElement; + console.log('FROM LIST', el.value); + 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..ea4582a1e 100644 --- a/packages/uui-combobox/lib/uui-combobox.element.ts +++ b/packages/uui-combobox/lib/uui-combobox.element.ts @@ -307,6 +307,13 @@ export class UUIComboboxElement extends UUIFormControlMixin(LitElement, '') { this.#onOpen(); } + if (e.key === ' ') { + if (this._isOpen) return; + e.preventDefault(); + e.stopImmediatePropagation(); + this.#onOpen(); + } + if (e.key === 'Escape' || e.key === 'Enter') { this.#onClose(); } From c9785d29ae7c513f28a33869d3d34dc217175fe9 Mon Sep 17 00:00:00 2001 From: engjlr Date: Fri, 3 Oct 2025 11:57:46 +0200 Subject: [PATCH 2/6] Remove z-index in the button --- .../lib/uui-menu-item.element.ts | 21 +++++++++++-------- 1 file changed, 12 insertions(+), 9 deletions(-) diff --git a/packages/uui-menu-item/lib/uui-menu-item.element.ts b/packages/uui-menu-item/lib/uui-menu-item.element.ts index eb7958d00..0936d5329 100644 --- a/packages/uui-menu-item/lib/uui-menu-item.element.ts +++ b/packages/uui-menu-item/lib/uui-menu-item.element.ts @@ -217,6 +217,7 @@ export class UUIMenuItemElement extends SelectOnlyMixin( render() { return html` ${this.loading ? html`` @@ -265,13 +265,10 @@ export class UUIMenuItemElement extends SelectOnlyMixin( } /** Not active, not selected, not disabled: */ + /* Only when NOT active/selected/disabled/highlight … */ :host(:not([active], [selected], [disabled], [select-mode='highlight'])) - #menu-item - #label-button:hover - ~ #label-button-background, - :host(:not([active], [selected], [disabled])) - #menu-item - #caret-button:hover { + #menu-item:has(#label-button:hover) + #label-button-background { background-color: var( --uui-menu-item-background-color-hover, var(--uui-color-surface-emphasis) @@ -480,7 +477,7 @@ export class UUIMenuItemElement extends SelectOnlyMixin( background-color: transparent; cursor: pointer; min-height: var(--uui-size-12); - z-index: 1; + //z-index: 1; } #label-button { @@ -498,7 +495,7 @@ export class UUIMenuItemElement extends SelectOnlyMixin( text-decoration: none; color: currentColor; min-height: var(--uui-size-12); - z-index: 1; + //z-index: 1; font-weight: inherit; } @@ -557,12 +554,18 @@ export class UUIMenuItemElement extends SelectOnlyMixin( #badge { font-size: 12px; + //Why is this duplicated? --uui-badge-position: relative; --uui-badge-position: auto; display: block; margin-left: 6px; } + #label-button ::slotted(uui-badge) { + position: relative; + z-index: 1; + } + /** Focus styling */ :host([select-mode='highlight']) #label-button:focus-visible { From 68b2783641fab1ef76af720de3d1f2d1e1982211 Mon Sep 17 00:00:00 2001 From: engjlr Date: Fri, 3 Oct 2025 12:04:46 +0200 Subject: [PATCH 3/6] Revert "Remove z-index in the button" This reverts commit c9785d29ae7c513f28a33869d3d34dc217175fe9. --- .../lib/uui-menu-item.element.ts | 21 ++++++++----------- 1 file changed, 9 insertions(+), 12 deletions(-) diff --git a/packages/uui-menu-item/lib/uui-menu-item.element.ts b/packages/uui-menu-item/lib/uui-menu-item.element.ts index 0936d5329..eb7958d00 100644 --- a/packages/uui-menu-item/lib/uui-menu-item.element.ts +++ b/packages/uui-menu-item/lib/uui-menu-item.element.ts @@ -217,7 +217,6 @@ export class UUIMenuItemElement extends SelectOnlyMixin( render() { return html` ${this.loading ? html`` @@ -265,10 +265,13 @@ export class UUIMenuItemElement extends SelectOnlyMixin( } /** Not active, not selected, not disabled: */ - /* Only when NOT active/selected/disabled/highlight … */ :host(:not([active], [selected], [disabled], [select-mode='highlight'])) - #menu-item:has(#label-button:hover) - #label-button-background { + #menu-item + #label-button:hover + ~ #label-button-background, + :host(:not([active], [selected], [disabled])) + #menu-item + #caret-button:hover { background-color: var( --uui-menu-item-background-color-hover, var(--uui-color-surface-emphasis) @@ -477,7 +480,7 @@ export class UUIMenuItemElement extends SelectOnlyMixin( background-color: transparent; cursor: pointer; min-height: var(--uui-size-12); - //z-index: 1; + z-index: 1; } #label-button { @@ -495,7 +498,7 @@ export class UUIMenuItemElement extends SelectOnlyMixin( text-decoration: none; color: currentColor; min-height: var(--uui-size-12); - //z-index: 1; + z-index: 1; font-weight: inherit; } @@ -554,18 +557,12 @@ export class UUIMenuItemElement extends SelectOnlyMixin( #badge { font-size: 12px; - //Why is this duplicated? --uui-badge-position: relative; --uui-badge-position: auto; display: block; margin-left: 6px; } - #label-button ::slotted(uui-badge) { - position: relative; - z-index: 1; - } - /** Focus styling */ :host([select-mode='highlight']) #label-button:focus-visible { From 497209609789e49e6dfa6c3e0ad1ebb48dce0c45 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Mon, 6 Oct 2025 15:08:14 +0200 Subject: [PATCH 4/6] Update packages/uui-combobox-list/lib/uui-combobox-list.element.ts Co-authored-by: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> --- packages/uui-combobox-list/lib/uui-combobox-list.element.ts | 1 - 1 file changed, 1 deletion(-) 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 ef8f42cbc..bea5f5009 100644 --- a/packages/uui-combobox-list/lib/uui-combobox-list.element.ts +++ b/packages/uui-combobox-list/lib/uui-combobox-list.element.ts @@ -242,7 +242,6 @@ export class UUIComboboxListElement extends LitElement { //Space key case ' ': { const el = e.target as HTMLInputElement; - console.log('FROM LIST', el.value); e.preventDefault(); e.stopPropagation(); this._getActiveElement?.click(); From e5cd7b4b3a8fcb863f8a698d8fa812f50e8e239c Mon Sep 17 00:00:00 2001 From: engjlr Date: Mon, 6 Oct 2025 20:38:28 +0200 Subject: [PATCH 5/6] Changed e.key for e.code for more consistency. --- .../uui-combobox-list/lib/uui-combobox-list.element.ts | 5 ++--- packages/uui-combobox/lib/uui-combobox.element.ts | 8 ++++---- 2 files changed, 6 insertions(+), 7 deletions(-) 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 bea5f5009..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) { @@ -240,8 +240,7 @@ export class UUIComboboxListElement extends LitElement { } //Space key - case ' ': { - const el = e.target as HTMLInputElement; + case 'Space': { e.preventDefault(); e.stopPropagation(); this._getActiveElement?.click(); diff --git a/packages/uui-combobox/lib/uui-combobox.element.ts b/packages/uui-combobox/lib/uui-combobox.element.ts index ea4582a1e..d923d5388 100644 --- a/packages/uui-combobox/lib/uui-combobox.element.ts +++ b/packages/uui-combobox/lib/uui-combobox.element.ts @@ -298,23 +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 === ' ') { + if (e.code === 'Space') { if (this._isOpen) return; e.preventDefault(); e.stopImmediatePropagation(); this.#onOpen(); } - if (e.key === 'Escape' || e.key === 'Enter') { + if (e.code === 'Escape' || e.code === 'Enter') { this.#onClose(); } }; From e722ed83c9cef51145a83d426930a314c7aa8bf0 Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Tue, 7 Oct 2025 12:45:04 +0200 Subject: [PATCH 6/6] test: adds `code` to keyboardevent --- packages/uui-combobox/lib/uui-combobox.test.ts | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) 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);