fix: only handle space & enter on container focus (#961)

qlik-oss · Oct 13, 2022 · a2a3771 · a2a3771
1 parent 5c2bf1b
commit a2a3771
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 2 deletions.
diff --git a/apis/nucleus/src/components/listbox/ListBoxInline.jsx b/apis/nucleus/src/components/listbox/ListBoxInline.jsx
@@ -269,6 +269,7 @@ export default function ListBoxInline({ app, fieldIdentifier, stateName = '$', o
 
   return (
     <StyledGrid
+      className="listbox-container"
       container
       tabIndex={keyboard.enabled && !keyboard.active ? 0 : -1}
       direction="column"

diff --git a/...ucleus/src/components/listbox/interactions/__tests__/list-box-keyboard-navigation.spec.js b/...ucleus/src/components/listbox/interactions/__tests__/list-box-keyboard-navigation.spec.js
@@ -153,7 +153,32 @@ describe('keyboard navigation', () => {
     it('should focus value with Space', () => {
       const element = { focus: sandbox.stub() };
       const event = {
-        currentTarget: { querySelector: sandbox.stub().withArgs('.value.selector,.value').returns(element) },
+        currentTarget: {
+          querySelector: sandbox.stub().withArgs('.value.selector,.value').returns(element),
+        },
+        target: {
+          classList: { contains: (c) => c === 'listbox-container' },
+        },
+        nativeEvent: { keyCode: 32 },
+        preventDefault: sandbox.stub(),
+        stopPropagation: sandbox.stub(),
+      };
+      handleKeyDownForListbox(event);
+      expect(element.focus).calledOnce;
+      expect(event.preventDefault).calledOnce;
+      expect(event.stopPropagation).not.called;
+      expect(setKeyboardActive).calledOnce.calledWith(true);
+    });
+
+    it('should not focus value with Space when target is not listbox-container', () => {
+      const element = { focus: sandbox.stub() };
+      const event = {
+        currentTarget: {
+          querySelector: sandbox.stub().withArgs('.value.selector,.value').returns(element),
+        },
+        target: {
+          classList: { contains: (c) => c === 'listbox-container' },
+        },
         nativeEvent: { keyCode: 32 },
         preventDefault: sandbox.stub(),
         stopPropagation: sandbox.stub(),
@@ -168,7 +193,12 @@ describe('keyboard navigation', () => {
     it('should focus value with Enter', () => {
       const element = { focus: sandbox.stub() };
       const event = {
-        currentTarget: { querySelector: sandbox.stub().withArgs('.value.selector,.value').returns(element) },
+        currentTarget: {
+          querySelector: sandbox.stub().withArgs('.value.selector,.value').returns(element),
+        },
+        target: {
+          classList: { contains: (c) => c === 'listbox-container' },
+        },
         nativeEvent: { keyCode: 13 },
         preventDefault: sandbox.stub(),
         stopPropagation: sandbox.stub(),

diff --git a/apis/nucleus/src/components/listbox/interactions/listbox-keyboard-navigation.js b/apis/nucleus/src/components/listbox/interactions/listbox-keyboard-navigation.js
@@ -84,6 +84,9 @@ export function getListboxInlineKeyboardNavigation({ setKeyboardActive }) {
       // case KEYS.TAB: TODO: Focus confirm button using keyboard.focusSelection when we can access the useKeyboard hook.
       case KEYS.ENTER:
       case KEYS.SPACE:
+        if (!event.target.classList.contains('listbox-container')) {
+          return; // don't mess with keydown handlers within the listbox
+        }
         focusInsideListbox(event.currentTarget);
         break;
       case KEYS.ESCAPE: