refactor: revert to old useState and fix unit test

qlik-oss · Apr 3, 2023 · fc4f0e6 · fc4f0e6
1 parent 2f69ba4
commit fc4f0e6
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 9 deletions.
diff --git a/apis/nucleus/src/components/listbox/components/__tests__/useTempKeyboard.test.js b/apis/nucleus/src/components/listbox/components/__tests__/useTempKeyboard.test.js
@@ -87,7 +87,7 @@ describe('useTempKeyboard', () => {
     expect(typeof keyboard.focusSelection).toEqual('function');
   });
 
-  it('should set keyboardActive to true when calling focus()', async () => {
+  it('should set keyboardActive to true when calling focus()', () => {
     const enabled = true;
 
     const { result } = renderHook(() => useTempKeyboard({ containerRef, enabled }));
@@ -99,7 +99,7 @@ describe('useTempKeyboard', () => {
       keyboard.focus();
     });
 
-    await waitFor(() => {
+    waitFor(() => {
       expect(keyboard.active).toEqual(true);
     });
   });

diff --git a/apis/nucleus/src/components/listbox/components/useTempKeyboard.js b/apis/nucleus/src/components/listbox/components/useTempKeyboard.js
@@ -1,3 +1,5 @@
+import { useState } from 'react';
+
 export function removeInnnerTabStops(container) {
   container?.querySelectorAll('[tabIndex="0"]').forEach((elm) => {
     elm.setAttribute('tabIndex', -1);
@@ -16,22 +18,21 @@ export function getVizCell(container) {
 
 // Emulate the keyboard hook, until we support it in the Listbox.
 export default function useTempKeyboard({ containerRef, enabled }) {
+  const [keyboardActive, setKeyboardActive] = useState(false);
+
   const keyboard = {
     enabled,
     active: false,
-  };
-
-  Object.assign(keyboard, {
     /**
      * innerTabStops: whether keyboard permits inner tab stops
      *  (inner = everything inside .listbox-container)
      */
-    innerTabStops: !enabled || keyboard.active,
+    innerTabStops: !enabled || keyboardActive,
     blur(resetFocus) {
       if (!enabled) {
         return;
       }
-      keyboard.active = false;
+      setKeyboardActive(false);
       const vizCell = getVizCell(containerRef.current) || containerRef.current?.parentElement;
       removeInnnerTabStops(containerRef.current);
       removeLastFocused(containerRef.current);
@@ -45,7 +46,7 @@ export default function useTempKeyboard({ containerRef, enabled }) {
       if (!enabled) {
         return;
       }
-      keyboard.active = true;
+      setKeyboardActive(true);
       const c = containerRef.current;
       const searchField = c?.querySelector('.search input');
       const lastSelectedRow = c?.querySelector('.value.last-focused');
@@ -60,7 +61,7 @@ export default function useTempKeyboard({ containerRef, enabled }) {
       confirmButton?.setAttribute('tabIndex', 0);
       confirmButton?.focus();
     },
-  });
+  };
 
   return keyboard;
 }