From 4623b6127bd2daa61fa6f180bf4a64eefc856cf7 Mon Sep 17 00:00:00 2001
From: Guillim <guillim@users.noreply.github.com>
Date: Thu, 5 Dec 2024 19:07:19 +0100
Subject: [PATCH] Dropdown in dropdown (#8911)

Dropdown in dropdown bug
while still fixing scroll issue
fix #8716
---
 .../components/DropdownMenuItemsContainer.tsx | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuItemsContainer.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuItemsContainer.tsx
index ca642bcc6..1a4a197c7 100644
--- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuItemsContainer.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuItemsContainer.tsx
@@ -1,3 +1,4 @@
+import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
 import styled from '@emotion/styled';
 
 const StyledDropdownMenuItemsExternalContainer = styled.div<{
@@ -26,6 +27,10 @@ const StyledDropdownMenuItemsInternalContainer = styled.div`
   width: 100%;
 `;
 
+const StyledScrollWrapper = styled(ScrollWrapper)`
+  width: 100%;
+`;
+
 // TODO: refactor this, the dropdown should handle the max height behavior + scroll with the size middleware
 // We should instead create a DropdownMenuItemsContainerScrollable or take for granted that it is the default behavior
 export const DropdownMenuItemsContainer = ({
@@ -42,9 +47,17 @@ export const DropdownMenuItemsContainer = ({
       hasMaxHeight={hasMaxHeight}
       className={className}
     >
-      <StyledDropdownMenuItemsInternalContainer>
-        {children}
-      </StyledDropdownMenuItemsInternalContainer>
+      {hasMaxHeight ? (
+        <StyledScrollWrapper contextProviderName="dropdownMenuItemsContainer">
+          <StyledDropdownMenuItemsInternalContainer>
+            {children}
+          </StyledDropdownMenuItemsInternalContainer>
+        </StyledScrollWrapper>
+      ) : (
+        <StyledDropdownMenuItemsInternalContainer>
+          {children}
+        </StyledDropdownMenuItemsInternalContainer>
+      )}
     </StyledDropdownMenuItemsExternalContainer>
   );
 };