feat(uui-combobox): Add open functionality with space bar (#1170)

* fix(uui-combobox): Add open functionality with space bar

* Remove z-index in the button

* Revert "Remove z-index in the button"

This reverts commit c9785d2.

* Update packages/uui-combobox-list/lib/uui-combobox-list.element.ts

Co-authored-by: Jacob Overgaard <[email protected]>

* Changed e.key for e.code for more consistency.

---------

Co-authored-by: Niels Lyngsø <[email protected]>
Co-authored-by: Jacob Overgaard <[email protected]>

Author: 3 people

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);

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();
     }
   };

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);