Allow useArrowKeyNavigation consumers tell if container is visible

Author: acelaya

src/components/input/SelectNext.tsx

@@ -150,7 +150,12 @@ function SelectMain<T>({
   useKeyPress(['Escape'], closeListbox);
 
   // Vertical arrow key for options in the listbox
-  useArrowKeyNavigation(wrapperRef, { horizontal: false, loop: false });
+  useArrowKeyNavigation(listboxRef, {
+    horizontal: false,
+    loop: false,
+    autofocus: true,
+    containerVisible: listboxOpen,
+  });
 
   useLayoutEffect(() => {
     // Focus toggle button after closing listbox, only if previously focused

src/hooks/test/use-arrow-key-navigation-test.js

@@ -1,17 +1,23 @@
 import { render } from 'preact';
-import { useRef } from 'preact/hooks';
+import { useCallback, useMemo, useRef, useState } from 'preact/hooks';
 import { act } from 'preact/test-utils';
 
 import { waitFor } from '../../test-util/wait';
 import { useArrowKeyNavigation } from '../use-arrow-key-navigation';
 
 function Toolbar({ navigationOptions = {} }) {
   const containerRef = useRef();
+  const visible = navigationOptions.containerVisible ?? true;
 
   useArrowKeyNavigation(containerRef, navigationOptions);
 
   return (
-    <div ref={containerRef} data-testid="toolbar" tabIndex={-1}>
+    <div
+      ref={containerRef}
+      data-testid="toolbar"
+      tabIndex={-1}
+      style={{ display: visible ? 'block' : 'none' }}
+    >
       <button data-testid="bold">Bold</button>
       <button data-testid="italic">Italic</button>
       <button data-testid="underline">Underline</button>
@@ -22,6 +28,24 @@ function Toolbar({ navigationOptions = {} }) {
   );
 }
 
+function ToolbarWithToggle({ navigationOptions = {} }) {
+  const [visible, setVisible] = useState(false);
+  const toggleVisible = useCallback(() => setVisible(prev => !prev), []);
+  const options = useMemo(
+    () => ({ ...navigationOptions, containerVisible: visible }),
+    [navigationOptions, visible],
+  );
+
+  return (
+    <>
+      <button data-testid="toggle" onClick={toggleVisible}>
+        Toggle
+      </button>
+      <Toolbar navigationOptions={options} />
+    </>
+  );
+}
+
 describe('useArrowKeyNavigation', () => {
   let container;
   let toolbar;
@@ -349,4 +373,20 @@ describe('useArrowKeyNavigation', () => {
     pressKey('ArrowLeft');
     assert.equal(currentItem(), 'Bold');
   });
+
+  it('should re-check focus sequence when container visibility changes', async () => {
+    await act(() =>
+      render(
+        <ToolbarWithToggle navigationOptions={{ autofocus: true }} />,
+        container,
+      ),
+    );
+
+    // No button should be initially focused
+    assert.equal(document.activeElement, document.body);
+
+    // Once we toggle the list open, the first item will be focused
+    findElementByTestId('toggle').click();
+    await waitFor(() => document.activeElement === findElementByTestId('bold'));
+  });
 });

src/hooks/use-arrow-key-navigation.ts

@@ -33,6 +33,15 @@ export type UseArrowKeyNavigationOptions = {
    * CSS selector which specifies the elements that navigation moves between
    */
   selector?: string;
+
+  /**
+   * Indicates if the container element is currently visible.
+   * This information is used to focus the current element when the container
+   * transitions from hidden to visible.
+   *
+   * Defaults to `true`.
+   */
+  containerVisible?: boolean;
 };
 
 /**
@@ -77,11 +86,12 @@ export function useArrowKeyNavigation(
     horizontal = true,
     vertical = true,
     selector = 'a,button',
+    containerVisible = true,
   }: UseArrowKeyNavigationOptions = {},
 ) {
   // Keep track of the element that was last focused by this hook such that
-  // navigation can be restored if focus moves outside of the container
-  // and then back to/into it.
+  // navigation can be restored if focus moves outside the container and then
+  // back to/into it.
   const lastFocusedItem = useRef<HTMLOrSVGElement | null>(null);
 
   useEffect(() => {
@@ -182,7 +192,7 @@ export function useArrowKeyNavigation(
       event.stopPropagation();
     };
 
-    updateTabIndexes(getNavigableElements(), 0, autofocus);
+    updateTabIndexes(getNavigableElements(), 0, containerVisible && autofocus);
 
     const listeners = new ListenerCollection();
 
@@ -222,5 +232,13 @@ export function useArrowKeyNavigation(
       listeners.removeAll();
       mo.disconnect();
     };
-  }, [autofocus, containerRef, horizontal, loop, selector, vertical]);
+  }, [
+    autofocus,
+    containerRef,
+    horizontal,
+    loop,
+    selector,
+    vertical,
+    containerVisible,
+  ]);
 }