Fix scroll in MenuItem in navigation section (#5023)

* Fix scroll in MenuItem in navigation section * Add changeset --------- Co-authored-by: Paweł Chyła <[email protected]>
saleor · Aug 9, 2024 · 69160a0 · 69160a0
1 parent 8e91df3
commit 69160a0
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 3 deletions.
diff --git a/.changeset/wise-rice-shout.md b/.changeset/wise-rice-shout.md
@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Make MenuItems' container scrollable in navigation section
diff --git a/src/components/AutocompleteSelectMenu/AutocompleteSelectMenu.test.tsx b/src/components/AutocompleteSelectMenu/AutocompleteSelectMenu.test.tsx
@@ -64,9 +64,10 @@ describe("AutocompleteSelectMenu", () => {
     testIds: ["1", "2", "3", "4"],
   };
 
+  const { container } = render(<AutocompleteSelectMenu {...defaultProps} />);
+
   it("renders without crashing", () => {
     // Arrange & Act
-    const { container } = render(<AutocompleteSelectMenu {...defaultProps} />);
 
     // Assert
     expect(container).toBeInTheDocument();
@@ -97,7 +98,7 @@ describe("AutocompleteSelectMenu", () => {
 
   it("shows inner list when option is selected", async () => {
     // Arrange
-    const { getByPlaceholderText, getByText } = render(
+    const { getByPlaceholderText, getByText, getByTestId } = render(
       <IntlProvider locale="en">
         <AutocompleteSelectMenu {...defaultProps} />
       </IntlProvider>,
@@ -109,11 +110,18 @@ describe("AutocompleteSelectMenu", () => {
 
     const option = getByText("Option 1");
 
+    const scrollableContainer = getByTestId("menu-link-options");
+
+    scrollableContainer.scrollTop = option.offsetTop;
+
     fireEvent.click(option);
 
     // Assert
     await waitFor(() => {
-      expect(getByText("Option 1 Child")).toBeInTheDocument();
+      const childOption = getByText("Option 1 Child");
+
+      scrollableContainer.scrollTop = childOption.offsetTop;
+      expect(childOption).toBeInTheDocument();
     });
   });
 });
diff --git a/src/components/AutocompleteSelectMenu/AutocompleteSelectMenu.tsx b/src/components/AutocompleteSelectMenu/AutocompleteSelectMenu.tsx
@@ -46,6 +46,8 @@ const useStyles = makeStyles(
       position: "absolute",
       right: 0,
       zIndex: 2,
+      overflow: "auto",
+      maxHeight: "300px",
     },
     root: {},
   }),