feat: close submenu if another submenu is opened (#911)

2022-03-05 20:20:11 +05:30
parent 263640d476
commit 08fb913b0e
7 changed files with 265 additions and 273 deletions
--- a/app/assets/javascripts/components/NotesOptions/AddTagOption.tsx
+++ b/app/assets/javascripts/components/NotesOptions/AddTagOption.tsx
@@ -0,0 +1,129 @@
+import { AppState } from '@/ui_models/app_state';
+import {
+  calculateSubmenuStyle,
+  SubmenuStyle,
+} from '@/utils/calculateSubmenuStyle';
+import {
+  Disclosure,
+  DisclosureButton,
+  DisclosurePanel,
+} from '@reach/disclosure';
+import { observer } from 'mobx-react-lite';
+import { FunctionComponent } from 'preact';
+import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
+import { Icon } from '../Icon';
+import { useCloseOnBlur } from '../utils';
+
+type Props = {
+  appState: AppState;
+};
+
+export const AddTagOption: FunctionComponent<Props> = observer(
+  ({ appState }) => {
+    const menuContainerRef = useRef<HTMLDivElement>(null);
+    const menuRef = useRef<HTMLDivElement>(null);
+    const menuButtonRef = useRef<HTMLButtonElement>(null);
+
+    const [isMenuOpen, setIsMenuOpen] = useState(false);
+    const [menuStyle, setMenuStyle] = useState<SubmenuStyle>({
+      right: 0,
+      bottom: 0,
+      maxHeight: 'auto',
+    });
+
+    const [closeOnBlur] = useCloseOnBlur(menuContainerRef, setIsMenuOpen);
+
+    const toggleTagsMenu = () => {
+      if (!isMenuOpen) {
+        const menuPosition = calculateSubmenuStyle(menuButtonRef.current);
+        if (menuPosition) {
+          setMenuStyle(menuPosition);
+          console.log(menuPosition);
+        }
+      }
+
+      setIsMenuOpen(!isMenuOpen);
+    };
+
+    const recalculateMenuStyle = useCallback(() => {
+      const newMenuPosition = calculateSubmenuStyle(
+        menuButtonRef.current,
+        menuRef.current
+      );
+
+      if (newMenuPosition) {
+        setMenuStyle(newMenuPosition);
+        console.log(newMenuPosition);
+      }
+    }, []);
+
+    useEffect(() => {
+      if (isMenuOpen) {
+        setTimeout(() => {
+          recalculateMenuStyle();
+        });
+      }
+    }, [isMenuOpen, recalculateMenuStyle]);
+
+    return (
+      <div ref={menuContainerRef}>
+        <Disclosure open={isMenuOpen} onChange={toggleTagsMenu}>
+          <DisclosureButton
+            onKeyDown={(event) => {
+              if (event.key === 'Escape') {
+                setIsMenuOpen(false);
+              }
+            }}
+            onBlur={closeOnBlur}
+            ref={menuButtonRef}
+            className="sn-dropdown-item justify-between"
+          >
+            <div className="flex items-center">
+              <Icon type="hashtag" className="mr-2 color-neutral" />
+              Add tag
+            </div>
+            <Icon type="chevron-right" className="color-neutral" />
+          </DisclosureButton>
+          <DisclosurePanel
+            ref={menuRef}
+            onKeyDown={(event) => {
+              if (event.key === 'Escape') {
+                setIsMenuOpen(false);
+                menuButtonRef.current?.focus();
+              }
+            }}
+            style={{
+              ...menuStyle,
+              position: 'fixed',
+            }}
+            className="sn-dropdown min-w-80 flex flex-col py-2 max-h-120 max-w-xs fixed overflow-y-auto"
+          >
+            {appState.tags.tags.map((tag) => (
+              <button
+                key={tag.title}
+                className="sn-dropdown-item sn-dropdown-item--no-icon max-w-80"
+                onBlur={closeOnBlur}
+                onClick={() => {
+                  appState.notes.isTagInSelectedNotes(tag)
+                    ? appState.notes.removeTagFromSelectedNotes(tag)
+                    : appState.notes.addTagToSelectedNotes(tag);
+                }}
+              >
+                <span
+                  className={`whitespace-nowrap overflow-hidden overflow-ellipsis
+                      ${
+                        appState.notes.isTagInSelectedNotes(tag)
+                          ? 'font-bold'
+                          : ''
+                      }`}
+                >
+                  {appState.noteTags.getLongTitle(tag)}
+                </span>
+              </button>
+            ))}
+          </DisclosurePanel>
+        </Disclosure>
+      </div>
+    );
+  }
+);
--- a/app/assets/javascripts/components/NotesOptions/ChangeEditorOption.tsx
+++ b/app/assets/javascripts/components/NotesOptions/ChangeEditorOption.tsx
@@ -15,12 +15,12 @@ import {
  calculateSubmenuStyle,
  SubmenuStyle,
 } from '@/utils/calculateSubmenuStyle';
+import { useCloseOnBlur } from '../utils';

 type ChangeEditorOptionProps = {
  appState: AppState;
  application: WebApplication;
  note: SNNote;
-  closeOnBlur: (event: { relatedTarget: EventTarget | null }) => void;
 };

 type AccordionMenuGroup<T> = {
@@ -40,7 +40,6 @@ export type EditorMenuGroup = AccordionMenuGroup<EditorMenuItem>;

 export const ChangeEditorOption: FunctionComponent<ChangeEditorOptionProps> = ({
  application,
-  closeOnBlur,
  note,
 }) => {
  const [isOpen, setIsOpen] = useState(false);
@@ -50,9 +49,15 @@ export const ChangeEditorOption: FunctionComponent<ChangeEditorOptionProps> = ({
    bottom: 0,
    maxHeight: 'auto',
  });
+  const menuContainerRef = useRef<HTMLDivElement>(null);
  const menuRef = useRef<HTMLDivElement>(null);
  const buttonRef = useRef<HTMLButtonElement>(null);

+  const [closeOnBlur] = useCloseOnBlur(menuContainerRef, (open: boolean) => {
+    setIsOpen(open);
+    setIsVisible(open);
+  });
+
  const toggleChangeEditorMenu = () => {
    if (!isOpen) {
      const menuStyle = calculateSubmenuStyle(buttonRef.current);
@@ -81,49 +86,51 @@ export const ChangeEditorOption: FunctionComponent<ChangeEditorOptionProps> = ({
  }, [isOpen]);

  return (
-    <Disclosure open={isOpen} onChange={toggleChangeEditorMenu}>
-      <DisclosureButton
-        onKeyDown={(event) => {
-          if (event.key === KeyboardKey.Escape) {
-            setIsOpen(false);
-          }
-        }}
-        onBlur={closeOnBlur}
-        ref={buttonRef}
-        className="sn-dropdown-item justify-between"
-      >
-        <div className="flex items-center">
-          <Icon type="dashboard" className="color-neutral mr-2" />
-          Change editor
-        </div>
-        <Icon type="chevron-right" className="color-neutral" />
-      </DisclosureButton>
-      <DisclosurePanel
-        ref={menuRef}
-        onKeyDown={(event) => {
-          if (event.key === KeyboardKey.Escape) {
-            setIsOpen(false);
-            buttonRef.current?.focus();
-          }
-        }}
-        style={{
-          ...menuStyle,
-          position: 'fixed',
-        }}
-        className="sn-dropdown flex flex-col max-h-120 min-w-68 fixed overflow-y-auto"
-      >
-        {isOpen && (
-          <ChangeEditorMenu
-            application={application}
-            closeOnBlur={closeOnBlur}
-            note={note}
-            isVisible={isVisible}
-            closeMenu={() => {
+    <div ref={menuContainerRef}>
+      <Disclosure open={isOpen} onChange={toggleChangeEditorMenu}>
+        <DisclosureButton
+          onKeyDown={(event) => {
+            if (event.key === KeyboardKey.Escape) {
              setIsOpen(false);
-            }}
-          />
-        )}
-      </DisclosurePanel>
-    </Disclosure>
+            }
+          }}
+          onBlur={closeOnBlur}
+          ref={buttonRef}
+          className="sn-dropdown-item justify-between"
+        >
+          <div className="flex items-center">
+            <Icon type="dashboard" className="color-neutral mr-2" />
+            Change editor
+          </div>
+          <Icon type="chevron-right" className="color-neutral" />
+        </DisclosureButton>
+        <DisclosurePanel
+          ref={menuRef}
+          onKeyDown={(event) => {
+            if (event.key === KeyboardKey.Escape) {
+              setIsOpen(false);
+              buttonRef.current?.focus();
+            }
+          }}
+          style={{
+            ...menuStyle,
+            position: 'fixed',
+          }}
+          className="sn-dropdown flex flex-col max-h-120 min-w-68 fixed overflow-y-auto"
+        >
+          {isOpen && (
+            <ChangeEditorMenu
+              application={application}
+              closeOnBlur={closeOnBlur}
+              note={note}
+              isVisible={isVisible}
+              closeMenu={() => {
+                setIsOpen(false);
+              }}
+            />
+          )}
+        </DisclosurePanel>
+      </Disclosure>
+    </div>
  );
 };
--- a/app/assets/javascripts/components/NotesOptions/ListedActionsOption.tsx
+++ b/app/assets/javascripts/components/NotesOptions/ListedActionsOption.tsx
@@ -12,11 +12,11 @@ import { Action, ListedAccount, SNNote } from '@standardnotes/snjs';
 import { Fragment, FunctionComponent } from 'preact';
 import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
 import { Icon } from '../Icon';
+import { useCloseOnBlur } from '../utils';

 type Props = {
  application: WebApplication;
  note: SNNote;
-  closeOnBlur: (event: { relatedTarget: EventTarget | null }) => void;
 };

 type ListedMenuGroup = {
@@ -230,8 +230,8 @@ const ListedActionsMenu: FunctionComponent<ListedActionsMenuProps> = ({
 export const ListedActionsOption: FunctionComponent<Props> = ({
  application,
  note,
-  closeOnBlur,
 }) => {
+  const menuContainerRef = useRef<HTMLDivElement>(null);
  const menuRef = useRef<HTMLDivElement>(null);
  const menuButtonRef = useRef<HTMLButtonElement>(null);

@@ -242,6 +242,8 @@ export const ListedActionsOption: FunctionComponent<Props> = ({
    maxHeight: 'auto',
  });

+  const [closeOnBlur] = useCloseOnBlur(menuContainerRef, setIsMenuOpen);
+
  const toggleListedMenu = () => {
    if (!isMenuOpen) {
      const menuPosition = calculateSubmenuStyle(menuButtonRef.current);
@@ -273,34 +275,36 @@ export const ListedActionsOption: FunctionComponent<Props> = ({
  }, [isMenuOpen, recalculateMenuStyle]);

  return (
-    <Disclosure open={isMenuOpen} onChange={toggleListedMenu}>
-      <DisclosureButton
-        ref={menuButtonRef}
-        onBlur={closeOnBlur}
-        className="sn-dropdown-item justify-between"
-      >
-        <div className="flex items-center">
-          <Icon type="listed" className="color-neutral mr-2" />
-          Listed actions
-        </div>
-        <Icon type="chevron-right" className="color-neutral" />
-      </DisclosureButton>
-      <DisclosurePanel
-        ref={menuRef}
-        style={{
-          ...menuStyle,
-          position: 'fixed',
-        }}
-        className="sn-dropdown flex flex-col max-h-120 min-w-68 pb-1 fixed overflow-y-auto"
-      >
-        {isMenuOpen && (
-          <ListedActionsMenu
-            application={application}
-            note={note}
-            recalculateMenuStyle={recalculateMenuStyle}
-          />
-        )}
-      </DisclosurePanel>
-    </Disclosure>
+    <div ref={menuContainerRef}>
+      <Disclosure open={isMenuOpen} onChange={toggleListedMenu}>
+        <DisclosureButton
+          ref={menuButtonRef}
+          onBlur={closeOnBlur}
+          className="sn-dropdown-item justify-between"
+        >
+          <div className="flex items-center">
+            <Icon type="listed" className="color-neutral mr-2" />
+            Listed actions
+          </div>
+          <Icon type="chevron-right" className="color-neutral" />
+        </DisclosureButton>
+        <DisclosurePanel
+          ref={menuRef}
+          style={{
+            ...menuStyle,
+            position: 'fixed',
+          }}
+          className="sn-dropdown flex flex-col max-h-120 min-w-68 pb-1 fixed overflow-y-auto"
+        >
+          {isMenuOpen && (
+            <ListedActionsMenu
+              application={application}
+              note={note}
+              recalculateMenuStyle={recalculateMenuStyle}
+            />
+          )}
+        </DisclosurePanel>
+      </Disclosure>
+    </div>
  );
 };
--- a/app/assets/javascripts/components/NotesOptions/NotesOptions.tsx
+++ b/app/assets/javascripts/components/NotesOptions/NotesOptions.tsx
@@ -2,29 +2,20 @@ import { AppState } from '@/ui_models/app_state';
 import { Icon } from '../Icon';
 import { Switch } from '../Switch';
 import { observer } from 'mobx-react-lite';
-import { useRef, useState, useEffect, useMemo } from 'preact/hooks';
-import {
-  Disclosure,
-  DisclosureButton,
-  DisclosurePanel,
-} from '@reach/disclosure';
+import { useState, useEffect, useMemo } from 'preact/hooks';
 import { SNApplication, SNNote } from '@standardnotes/snjs';
 import { WebApplication } from '@/ui_models/application';
 import { KeyboardModifier } from '@/services/ioService';
 import { FunctionComponent } from 'preact';
 import { ChangeEditorOption } from './ChangeEditorOption';
-import {
-  MENU_MARGIN_FROM_APP_BORDER,
-  MAX_MENU_SIZE_MULTIPLIER,
-  BYTES_IN_ONE_MEGABYTE,
-} from '@/constants';
+import { BYTES_IN_ONE_MEGABYTE } from '@/constants';
 import { ListedActionsOption } from './ListedActionsOption';
+import { AddTagOption } from './AddTagOption';

 export type NotesOptionsProps = {
  application: WebApplication;
  appState: AppState;
  closeOnBlur: (event: { relatedTarget: EventTarget | null }) => void;
-  onSubmenuChange?: (submenuOpen: boolean) => void;
 };

 type DeletePermanentlyButtonProps = {
@@ -206,24 +197,7 @@ const NoteSizeWarning: FunctionComponent<{
  ) : null;

 export const NotesOptions = observer(
-  ({
-    application,
-    appState,
-    closeOnBlur,
-    onSubmenuChange,
-  }: NotesOptionsProps) => {
-    const [tagsMenuOpen, setTagsMenuOpen] = useState(false);
-    const [tagsMenuPosition, setTagsMenuPosition] = useState<{
-      top: number;
-      right?: number;
-      left?: number;
-    }>({
-      top: 0,
-      right: 0,
-    });
-    const [tagsMenuMaxHeight, setTagsMenuMaxHeight] = useState<number | 'auto'>(
-      'auto'
-    );
+  ({ application, appState, closeOnBlur }: NotesOptionsProps) => {
    const [altKeyDown, setAltKeyDown] = useState(false);

    const toggleOn = (condition: (note: SNNote) => boolean) => {
@@ -246,14 +220,6 @@ export const NotesOptions = observer(
    const unpinned = notes.some((note) => !note.pinned);
    const errored = notes.some((note) => note.errorDecrypting);

-    const tagsButtonRef = useRef<HTMLButtonElement>(null);
-
-    useEffect(() => {
-      if (onSubmenuChange) {
-        onSubmenuChange(tagsMenuOpen);
-      }
-    }, [tagsMenuOpen, onSubmenuChange]);
-
    useEffect(() => {
      const removeAltKeyObserver = application.io.addKeyObserver({
        modifiers: [KeyboardModifier.Alt],
@@ -270,48 +236,6 @@ export const NotesOptions = observer(
      };
    }, [application]);

-    const openTagsMenu = () => {
-      const defaultFontSize = window.getComputedStyle(
-        document.documentElement
-      ).fontSize;
-      const maxTagsMenuSize =
-        parseFloat(defaultFontSize) * MAX_MENU_SIZE_MULTIPLIER;
-      const { clientWidth, clientHeight } = document.documentElement;
-      const buttonRect = tagsButtonRef.current?.getBoundingClientRect();
-      const footerElementRect = document
-        .getElementById('footer-bar')
-        ?.getBoundingClientRect();
-      const footerHeightInPx = footerElementRect?.height;
-
-      if (buttonRect && footerHeightInPx) {
-        if (
-          buttonRect.top + maxTagsMenuSize >
-          clientHeight - footerHeightInPx
-        ) {
-          setTagsMenuMaxHeight(
-            clientHeight -
-              buttonRect.top -
-              footerHeightInPx -
-              MENU_MARGIN_FROM_APP_BORDER
-          );
-        }
-
-        if (buttonRect.right + maxTagsMenuSize > clientWidth) {
-          setTagsMenuPosition({
-            top: buttonRect.top,
-            right: clientWidth - buttonRect.left,
-          });
-        } else {
-          setTagsMenuPosition({
-            top: buttonRect.top,
-            left: buttonRect.right,
-          });
-        }
-      }
-
-      setTagsMenuOpen(!tagsMenuOpen);
-    };
-
    const downloadSelectedItems = () => {
      notes.forEach((note) => {
        const editor = application.componentManager.editorForNote(note);
@@ -416,70 +340,12 @@ export const NotesOptions = observer(
            <ChangeEditorOption
              appState={appState}
              application={application}
-              closeOnBlur={closeOnBlur}
              note={notes[0]}
            />
          </>
        )}
        <div className="min-h-1px my-2 bg-border"></div>
-        {appState.tags.tagsCount > 0 && (
-          <Disclosure open={tagsMenuOpen} onChange={openTagsMenu}>
-            <DisclosureButton
-              onKeyDown={(event) => {
-                if (event.key === 'Escape') {
-                  setTagsMenuOpen(false);
-                }
-              }}
-              onBlur={closeOnBlur}
-              ref={tagsButtonRef}
-              className="sn-dropdown-item justify-between"
-            >
-              <div className="flex items-center">
-                <Icon type="hashtag" className={iconClass} />
-                {'Add tag'}
-              </div>
-              <Icon type="chevron-right" className="color-neutral" />
-            </DisclosureButton>
-            <DisclosurePanel
-              onKeyDown={(event) => {
-                if (event.key === 'Escape') {
-                  setTagsMenuOpen(false);
-                  tagsButtonRef.current?.focus();
-                }
-              }}
-              style={{
-                ...tagsMenuPosition,
-                maxHeight: tagsMenuMaxHeight,
-                position: 'fixed',
-              }}
-              className="sn-dropdown min-w-80 flex flex-col py-2 max-h-120 max-w-xs fixed overflow-y-auto"
-            >
-              {appState.tags.tags.map((tag) => (
-                <button
-                  key={tag.title}
-                  className="sn-dropdown-item sn-dropdown-item--no-icon max-w-80"
-                  onBlur={closeOnBlur}
-                  onClick={() => {
-                    appState.notes.isTagInSelectedNotes(tag)
-                      ? appState.notes.removeTagFromSelectedNotes(tag)
-                      : appState.notes.addTagToSelectedNotes(tag);
-                  }}
-                >
-                  <span
-                    className={`whitespace-nowrap overflow-hidden overflow-ellipsis
-                      ${
-                        appState.notes.isTagInSelectedNotes(tag)
-                          ? 'font-bold'
-                          : ''
-                      }`}
-                  >
-                    {appState.noteTags.getLongTitle(tag)}
-                  </span>
-                </button>
-              ))}
-            </DisclosurePanel>
-          </Disclosure>
-        )}
+        {appState.tags.tagsCount > 0 && <AddTagOption appState={appState} />}
        {unpinned && (
          <button
            onBlur={closeOnBlur}
@@ -604,11 +470,7 @@ export const NotesOptions = observer(
        {notes.length === 1 ? (
          <>
            <div className="min-h-1px my-2 bg-border"></div>
-            <ListedActionsOption
-              application={application}
-              closeOnBlur={closeOnBlur}
-              note={notes[0]}
-            />
+            <ListedActionsOption application={application} note={notes[0]} />
            <div className="min-h-1px my-2 bg-border"></div>
            <SpellcheckOptions appState={appState} note={notes[0]} />
            <div className="min-h-1px my-2 bg-border"></div>
--- a/app/assets/javascripts/components/NotesOptionsPanel.tsx
+++ b/app/assets/javascripts/components/NotesOptionsPanel.tsx
@@ -30,11 +30,6 @@ export const NotesOptionsPanel = observer(
    const buttonRef = useRef<HTMLButtonElement>(null);
    const panelRef = useRef<HTMLDivElement>(null);
    const [closeOnBlur] = useCloseOnBlur(panelRef, setOpen);
-    const [submenuOpen, setSubmenuOpen] = useState(false);
-
-    const onSubmenuChange = (open: boolean) => {
-      setSubmenuOpen(open);
-    };

    return (
      <Disclosure
@@ -64,7 +59,7 @@ export const NotesOptionsPanel = observer(
      >
        <DisclosureButton
          onKeyDown={(event) => {
-            if (event.key === 'Escape' && !submenuOpen) {
+            if (event.key === 'Escape') {
              setOpen(false);
            }
          }}
@@ -77,7 +72,7 @@ export const NotesOptionsPanel = observer(
        </DisclosureButton>
        <DisclosurePanel
          onKeyDown={(event) => {
-            if (event.key === 'Escape' && !submenuOpen) {
+            if (event.key === 'Escape') {
              setOpen(false);
              buttonRef.current?.focus();
            }
@@ -96,7 +91,6 @@ export const NotesOptionsPanel = observer(
              application={application}
              appState={appState}
              closeOnBlur={closeOnBlur}
-              onSubmenuChange={onSubmenuChange}
            />
          )}
        </DisclosurePanel>
--- a/app/assets/javascripts/components/menu/Menu.tsx
+++ b/app/assets/javascripts/components/menu/Menu.tsx
@@ -6,10 +6,11 @@ import {
  RefCallback,
  ComponentChild,
 } from 'preact';
-import { useEffect, useRef, useState } from 'preact/hooks';
+import { useEffect, useRef } from 'preact/hooks';
 import { JSXInternal } from 'preact/src/jsx';
 import { MenuItem, MenuItemListElement } from './MenuItem';
 import { KeyboardKey } from '@/services/ioService';
+import { useListKeyboardNavigation } from '../utils';

 type MenuProps = {
  className?: string;
@@ -28,7 +29,6 @@ export const Menu: FunctionComponent<MenuProps> = ({
  closeMenu,
  isOpen,
 }: MenuProps) => {
-  const [currentIndex, setCurrentIndex] = useState(0);
  const menuItemRefs = useRef<(HTMLButtonElement | null)[]>([]);

  const menuElementRef = useRef<HTMLMenuElement>(null);
@@ -40,44 +40,21 @@ export const Menu: FunctionComponent<MenuProps> = ({
      return;
    }

-    switch (event.key) {
-      case KeyboardKey.Home:
-        setCurrentIndex(0);
-        break;
-      case KeyboardKey.End:
-        setCurrentIndex(
-          menuItemRefs.current.length ? menuItemRefs.current.length - 1 : 0
-        );
-        break;
-      case KeyboardKey.Down:
-        setCurrentIndex((index) => {
-          if (index + 1 < menuItemRefs.current.length) {
-            return index + 1;
-          } else {
-            return 0;
-          }
-        });
-        break;
-      case KeyboardKey.Up:
-        setCurrentIndex((index) => {
-          if (index - 1 > -1) {
-            return index - 1;
-          } else {
-            return menuItemRefs.current.length - 1;
-          }
-        });
-        break;
-      case KeyboardKey.Escape:
-        closeMenu?.();
-        break;
+    if (event.key === KeyboardKey.Escape) {
+      closeMenu?.();
+      return;
    }
  };

+  useListKeyboardNavigation(menuElementRef);
+
  useEffect(() => {
-    if (isOpen && menuItemRefs.current[currentIndex]) {
-      menuItemRefs.current[currentIndex]?.focus();
+    if (isOpen && menuItemRefs.current.length > 0) {
+      setTimeout(() => {
+        menuElementRef.current?.focus();
+      });
    }
-  }, [currentIndex, isOpen]);
+  }, [isOpen]);

  const pushRefToArray: RefCallback<HTMLLIElement> = (instance) => {
    if (instance && instance.children) {
@@ -128,7 +105,7 @@ export const Menu: FunctionComponent<MenuProps> = ({

  return (
    <menu
-      className={`m-0 p-0 list-style-none ${className}`}
+      className={`m-0 p-0 list-style-none focus:shadow-none ${className}`}
      onKeyDown={handleKeyDown}
      ref={menuElementRef}
      style={style}
--- a/app/assets/javascripts/components/utils.ts
+++ b/app/assets/javascripts/components/utils.ts
@@ -89,13 +89,17 @@ export const calculateDifferenceBetweenDatesInDays = (
 export const useListKeyboardNavigation = (
  container: Ref<HTMLElement | null>
 ) => {
-  const [listItems, setListItems] = useState<NodeListOf<HTMLButtonElement>>();
+  const [listItems, setListItems] = useState<HTMLButtonElement[]>();
  const [focusedItemIndex, setFocusedItemIndex] = useState<number>(0);

  const focusItemWithIndex = useCallback(
-    (index: number) => {
+    (index: number, items?: HTMLButtonElement[]) => {
      setFocusedItemIndex(index);
-      listItems?.[index]?.focus();
+      if (items && items.length > 0) {
+        items[index]?.focus();
+      } else {
+        listItems?.[index]?.focus();
+      }
    },
    [listItems]
  );
@@ -103,7 +107,7 @@ export const useListKeyboardNavigation = (
  useEffect(() => {
    if (container.current) {
      container.current.tabIndex = FOCUSABLE_BUT_NOT_TABBABLE;
-      setListItems(container.current.querySelectorAll('button'));
+      setListItems(Array.from(container.current.querySelectorAll('button')));
    }
  }, [container]);

@@ -116,7 +120,13 @@ export const useListKeyboardNavigation = (
      }

      if (!listItems?.length) {
-        setListItems(container.current?.querySelectorAll('button'));
+        setListItems(
+          Array.from(
+            container.current?.querySelectorAll(
+              'button'
+            ) as NodeListOf<HTMLButtonElement>
+          )
+        );
      }

      if (listItems) {
@@ -143,16 +153,25 @@ export const useListKeyboardNavigation = (
  const FIRST_ITEM_FOCUS_TIMEOUT = 20;

  const containerFocusHandler = useCallback(() => {
-    if (listItems) {
-      const selectedItemIndex = Array.from(listItems).findIndex(
+    let temporaryItems = listItems && listItems?.length > 0 ? listItems : [];
+    if (!temporaryItems.length) {
+      temporaryItems = Array.from(
+        container.current?.querySelectorAll(
+          'button'
+        ) as NodeListOf<HTMLButtonElement>
+      );
+      setListItems(temporaryItems);
+    }
+    if (temporaryItems.length > 0) {
+      const selectedItemIndex = Array.from(temporaryItems).findIndex(
        (item) => item.dataset.selected
      );
      const indexToFocus = selectedItemIndex > -1 ? selectedItemIndex : 0;
      setTimeout(() => {
-        focusItemWithIndex(indexToFocus);
+        focusItemWithIndex(indexToFocus, temporaryItems);
      }, FIRST_ITEM_FOCUS_TIMEOUT);
    }
-  }, [focusItemWithIndex, listItems]);
+  }, [container, focusItemWithIndex, listItems]);

  useEffect(() => {
    const containerElement = container.current;