fix: support Enter to go from a folded listbox to a row (#1219)

qlik-oss · Apr 13, 2023 · 8eabc25 · 8eabc25
1 parent 33eaa57
commit 8eabc25
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
diff --git a/apis/nucleus/src/components/listbox/components/useTempKeyboard.js b/apis/nucleus/src/components/listbox/components/useTempKeyboard.js
@@ -50,9 +50,9 @@ export default function useTempKeyboard({ containerRef, enabled }) {
       const c = containerRef.current;
       const searchField = c?.querySelector('.search input');
       const lastSelectedRow = c?.querySelector('.value.last-focused');
-      const fieldElement = c?.querySelector('.value.selector, .value, .ActionsToolbar-item button');
-
-      const elementToFocus = searchField || lastSelectedRow || fieldElement;
+      const firstRowElement = c?.querySelector('.value.selector, .value');
+      const confirmButton = c?.querySelector('.actions-toolbar-default-actions .actions-toolbar-confirm');
+      const elementToFocus = searchField || lastSelectedRow || firstRowElement || confirmButton;
       elementToFocus?.setAttribute('tabIndex', 0);
       elementToFocus?.focus();
     },

diff --git a/apis/nucleus/src/components/listbox/interactions/listbox-keyboard-navigation.js b/apis/nucleus/src/components/listbox/interactions/listbox-keyboard-navigation.js
@@ -180,7 +180,7 @@ export function getListboxInlineKeyboardNavigation({
       // 3. Blur row and focus the listbox container.
       keyboard.blur();
       const c = currentTarget.closest('.listbox-container');
-      c.setAttribute('tabIndex', 0);
+      c.setAttribute('tabIndex', -1);
       c?.focus();
     }
   };