refactor: set tabIndex -1 and leave esc alone

qlik-oss · Mar 31, 2023 · 76c760c · 76c760c
1 parent aed66c4
commit 76c760c
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 11 deletions.
diff --git a/apis/nucleus/src/components/listbox/ListBoxInline.jsx b/apis/nucleus/src/components/listbox/ListBoxInline.jsx
@@ -273,7 +273,7 @@ function ListBoxInline({ options, layout }) {
       <StyledGrid
         className="listbox-container"
         container
-        tabIndex={keyboard.outerTabStops ? 0 : -1}
+        tabIndex={-1}
         direction="column"
         gap={0}
         containerPadding={containerPadding}

diff --git a/...ucleus/src/components/listbox/interactions/__tests__/list-box-keyboard-navigation.test.js b/...ucleus/src/components/listbox/interactions/__tests__/list-box-keyboard-navigation.test.js
@@ -348,7 +348,7 @@ describe('keyboard navigation', () => {
       expect(currentTarget.focus).not.toHaveBeenCalled();
       expect(currentTarget.blur).not.toHaveBeenCalled();
 
-      expect(event.preventDefault).toHaveBeenCalledTimes(1);
+      expect(event.preventDefault).not.toHaveBeenCalled;
     });
     test('should change focus with Escape on a listbox', () => {
       const currentTarget = {
@@ -374,7 +374,7 @@ describe('keyboard navigation', () => {
       expect(currentTarget.blur).not.toHaveBeenCalled();
       expect(currentTarget.focus).not.toHaveBeenCalled();
 
-      expect(event.preventDefault).toHaveBeenCalledTimes(1);
+      expect(event.preventDefault).not.toHaveBeenCalled;
     });
     test('not matched key should not call event methods', () => {
       const element = createElement(0);

diff --git a/apis/nucleus/src/components/listbox/interactions/listbox-keyboard-navigation.js b/apis/nucleus/src/components/listbox/interactions/listbox-keyboard-navigation.js
@@ -230,7 +230,7 @@ export function getListboxInlineKeyboardNavigation({
 
     if (!keyboard.enabled) {
       // Other keys should not be handled unless keyboard is enabled.
-      return undefined;
+      return;
     }
 
     const container = event.currentTarget.closest('.listbox-container');
@@ -247,29 +247,24 @@ export function getListboxInlineKeyboardNavigation({
         } else if (shiftKey) {
           keyboard.blur(true);
         } else {
-          focusSearch(container) || focusRow(container);
+          break;
         }
         prevent();
         break;
       case KEYS.ENTER:
       case KEYS.SPACE:
         if (!event.target.classList.contains('listbox-container')) {
-          return undefined; // don't mess with keydown handlers within the listbox (e.g. row seletion)
+          break; // don't mess with keydown handlers within the listbox (e.g. row seletion)
         }
         keyboard.focus();
         prevent();
         break;
       case KEYS.ESCAPE:
         blur(event);
-        prevent();
         break;
-      case KEYS.ARROW_LEFT:
-      case KEYS.ARROW_RIGHT:
-        return undefined; // let it propagate to top-level
       default:
         break;
     }
-    return undefined;
   };
 
   const focusOnHoverDisabled = () => {