Use Portal to render menu content and use consistent positioning.

open-pioneer · Dec 18, 2023 · 0672db8 · 0672db8
1 parent 710537d
commit 0672db8
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 40 deletions.
diff --git a/src/packages/toc/LayerList.tsx b/src/packages/toc/LayerList.tsx
@@ -115,7 +115,7 @@ function LayerItemDescriptor(props: {
     const description = useLayerDescription(layer);
 
     return (
-        <Popover>
+        <Popover placement="bottom-start">
             <PopoverTrigger>
                 <Button
                     className="toc-layer-item-details-button"

diff --git a/src/packages/toc/Tools.test.tsx b/src/packages/toc/Tools.test.tsx
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 import { createServiceOptions, setupMap } from "@open-pioneer/map-test-utils";
 import { PackageContextProvider } from "@open-pioneer/test-utils/react";
-import { render, screen } from "@testing-library/react";
+import { render, screen, waitFor } from "@testing-library/react";
 import TileLayer from "ol/layer/Tile";
 import { expect, it } from "vitest";
 import { Toc } from "./Toc";
@@ -35,6 +35,9 @@ it("Should successfully create a toc with default tool component", async () => {
 
     const toolsDiv = await findTools();
     expect(toolsDiv).toMatchSnapshot();
+
+    const toolsMenu = await findMenu();
+    expect(toolsMenu).toMatchSnapshot();
 });
 
 it("Should successfully hide all layers in toc", async () => {
@@ -87,3 +90,14 @@ async function findTools() {
     const tocDiv = await screen.findByTestId("toc");
     return tocDiv.querySelector(".tools");
 }
+
+async function findMenu() {
+    const menu = await waitFor(() => {
+        const menu = document.querySelector(".tools-menu");
+        if (!menu) {
+            throw new Error("Menu not found");
+        }
+        return menu;
+    });
+    return menu;
+}
diff --git a/src/packages/toc/Tools.tsx b/src/packages/toc/Tools.tsx
@@ -6,7 +6,8 @@ import {
     MenuList,
     MenuItem,
     Button,
-    Box
+    Box,
+    Portal
 } from "@open-pioneer/chakra-integration";
 import { FC } from "react";
 import { FiMoreVertical } from "react-icons/fi";
@@ -24,7 +25,7 @@ export const Tools: FC<{ mapId: string } & ToolConfig> = (props) => {
     return (
         !noEntry && (
             <Box className="tools">
-                <Menu>
+                <Menu placement="bottom-start">
                     <Button
                         as={MenuButton}
                         className="tools-button"
@@ -35,16 +36,18 @@ export const Tools: FC<{ mapId: string } & ToolConfig> = (props) => {
                         variant="ghost"
                         leftIcon={<FiMoreVertical />}
                     />
-                    <MenuList>
-                        <MenuItem
-                            aria-label={intl.formatMessage({ id: "hideAllLayers" })}
-                            onClick={() => {
-                                hideAllLayers(map);
-                            }}
-                        >
-                            {intl.formatMessage({ id: "hideAllLayers" })}
-                        </MenuItem>
-                    </MenuList>
+                    <Portal>
+                        <MenuList className="tools-menu">
+                            <MenuItem
+                                aria-label={intl.formatMessage({ id: "hideAllLayers" })}
+                                onClick={() => {
+                                    hideAllLayers(map);
+                                }}
+                            >
+                                {intl.formatMessage({ id: "hideAllLayers" })}
+                            </MenuItem>
+                        </MenuList>
+                    </Portal>
                 </Menu>
             </Box>
         )

diff --git a/src/packages/toc/__snapshots__/Tools.test.tsx.snap b/src/packages/toc/__snapshots__/Tools.test.tsx.snap
@@ -55,33 +55,30 @@ exports[`Should successfully create a toc with default tool component 1`] = `
       </span>
     </span>
   </button>
-  <div
-    class="css-r6z5ec"
+</div>
+`;
+
+exports[`Should successfully create a toc with default tool component 2`] = `
+<div
+  aria-orientation="vertical"
+  class="tools-menu css-1kfu8nn"
+  data-theme="light"
+  id="menu-list-:r3:"
+  role="menu"
+  style="transform-origin: var(--popper-transform-origin); opacity: 0; visibility: hidden; transform: scale(0.8) translateZ(0);"
+  tabindex="-1"
+>
+  <button
+    aria-label="hideAllLayers"
+    class="chakra-menu__menuitem css-18esm8n"
+    data-index="0"
     data-theme="light"
-    style="visibility: hidden; position: absolute; min-width: max-content;"
+    id="menu-list-:r3:-menuitem-:r4:"
+    role="menuitem"
+    tabindex="-1"
+    type="button"
   >
-    <div
-      aria-orientation="vertical"
-      class="chakra-menu__menu-list css-1kfu8nn"
-      data-theme="light"
-      id="menu-list-:r3:"
-      role="menu"
-      style="transform-origin: var(--popper-transform-origin); opacity: 0; visibility: hidden; transform: scale(0.8) translateZ(0);"
-      tabindex="-1"
-    >
-      <button
-        aria-label="hideAllLayers"
-        class="chakra-menu__menuitem css-18esm8n"
-        data-index="0"
-        data-theme="light"
-        id="menu-list-:r3:-menuitem-:r4:"
-        role="menuitem"
-        tabindex="-1"
-        type="button"
-      >
-        hideAllLayers
-      </button>
-    </div>
-  </div>
+    hideAllLayers
+  </button>
 </div>
 `;