Use portal instead of zIndex for settings menu

microbit-foundation · Nov 13, 2024 · 30b2bc3 · 30b2bc3
1 parent 57d2eee
commit 30b2bc3
Showing 1 changed file with 33 additions and 22 deletions.
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>
   );
 };