Position help menu list on top (#488)

* Use portal instead of zIndex for settings menu as well * Lowercase refs in HelpMenu.tsx and other places
microbit-foundation · Nov 13, 2024 · 6ed35d9 · 6ed35d9
1 parent 55a8bb2
commit 6ed35d9
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 31 deletions.
diff --git a/src/components/HelpMenu.tsx b/src/components/HelpMenu.tsx
@@ -24,23 +24,24 @@ const HelpMenu = ({ ...rest }: HelpMenuProps) => {
   const aboutDialogDisclosure = useDisclosure();
   const feedbackDisclosure = useDisclosure();
   const intl = useIntl();
-  const MenuButtonRef = useRef(null);
+  const menuButtonRef = useRef(null);
+  const containerRef = useRef(null);
   return (
-    <Box {...rest}>
+    <Box {...rest} ref={containerRef}>
       <AboutDialog
         isOpen={aboutDialogDisclosure.isOpen}
         onClose={aboutDialogDisclosure.onClose}
-        finalFocusRef={MenuButtonRef}
+        finalFocusRef={menuButtonRef}
       />
       <FeedbackForm
         isOpen={feedbackDisclosure.isOpen}
         onClose={feedbackDisclosure.onClose}
-        finalFocusRef={MenuButtonRef}
+        finalFocusRef={menuButtonRef}
       />
       <Menu>
         <MenuButton
           as={IconButton}
-          ref={MenuButtonRef}
+          ref={menuButtonRef}
           aria-label={intl.formatMessage({ id: "help-label" })}
           size="sm"
           fontSize="2xl"
@@ -53,7 +54,7 @@ const HelpMenu = ({ ...rest }: HelpMenuProps) => {
             boxShadow: "outlineDark",
           }}
         />
-        <Portal>
+        <Portal containerRef={containerRef}>
           <MenuList>
             <HelpMenuItems />
           </MenuList>

diff --git a/src/components/HelpMenuItems.tsx b/src/components/HelpMenuItems.tsx
@@ -21,19 +21,19 @@ import FeedbackForm from "./FeedbackForm";
 const HelpMenuItems = () => {
   const aboutDialogDisclosure = useDisclosure();
   const feedbackDisclosure = useDisclosure();
-  const MenuButtonRef = useRef(null);
+  const menuButtonRef = useRef(null);
   const deployment = useDeployment();
   return (
     <>
       <AboutDialog
         isOpen={aboutDialogDisclosure.isOpen}
         onClose={aboutDialogDisclosure.onClose}
-        finalFocusRef={MenuButtonRef}
+        finalFocusRef={menuButtonRef}
       />
       <FeedbackForm
         isOpen={feedbackDisclosure.isOpen}
         onClose={feedbackDisclosure.onClose}
-        finalFocusRef={MenuButtonRef}
+        finalFocusRef={menuButtonRef}
       />
       <MenuItem
         as="a"

diff --git a/src/components/SettingsMenu.tsx b/src/components/SettingsMenu.tsx
@@ -1,4 +1,11 @@
-import { IconButton, Menu, MenuButton, MenuList } from "@chakra-ui/react";
+import {
+  Box,
+  IconButton,
+  Menu,
+  MenuButton,
+  MenuList,
+  Portal,
+} from "@chakra-ui/react";
 import { useRef } from "react";
 import { RiSettings2Line } from "react-icons/ri";
 import { useIntl } from "react-intl";
@@ -10,28 +17,32 @@ import LanguageMenuItem from "./LanguageMenuItem";
 const SettingsMenu = () => {
   const intl = useIntl();
   const settingsMenuRef = useRef(null);
-
+  const containerRef = useRef(null);
   return (
-    <Menu>
-      <MenuButton
-        ref={settingsMenuRef}
-        as={IconButton}
-        aria-label={intl.formatMessage({ id: "settings-menu-action" })}
-        size="lg"
-        fontSize="2xl"
-        icon={<RiSettings2Line fill="white" size={24} />}
-        variant="plain"
-        isRound
-        h={12}
-        w={12}
-        _focusVisible={{
-          boxShadow: "outlineDark",
-        }}
-      />
-      <MenuList zIndex={2}>
-        <LanguageMenuItem finalFocusRef={settingsMenuRef} />
-      </MenuList>
-    </Menu>
+    <Box ref={containerRef}>
+      <Menu>
+        <MenuButton
+          ref={settingsMenuRef}
+          as={IconButton}
+          aria-label={intl.formatMessage({ id: "settings-menu-action" })}
+          size="lg"
+          fontSize="2xl"
+          icon={<RiSettings2Line fill="white" size={24} />}
+          variant="plain"
+          isRound
+          h={12}
+          w={12}
+          _focusVisible={{
+            boxShadow: "outlineDark",
+          }}
+        />
+        <Portal containerRef={containerRef}>
+          <MenuList>
+            <LanguageMenuItem finalFocusRef={settingsMenuRef} />
+          </MenuList>
+        </Portal>
+      </Menu>
+    </Box>
   );
 };