fix: Country Dropdown not closing with AddressInput (#8147)

## Description - This PR fixes #8080 - The Country Selector dropdown closes with Address Input `clickOutside` function ## Changes https://github.com/user-attachments/assets/1ab85175-9ce9-40d2-ac52-14bfe87e254f --------- Co-authored-by: Devessier <[email protected]>
twentyhq · Oct 29, 2024 · 7901dbc · 7901dbc
1 parent 94f2e10
commit 7901dbc
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 1 deletion.
diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx
@@ -70,6 +70,7 @@ export const Dropdown = ({
     closeDropdown,
     dropdownWidth,
     setDropdownPlacement,
+    resetDropdown,
   } = useDropdown(dropdownId);
 
   const offsetMiddlewares = [];
@@ -130,6 +131,12 @@ export const Dropdown = ({
     [closeDropdown],
   );
 
+  useEffect(() => {
+    return () => {
+      resetDropdown();
+    };
+  }, [resetDropdown]);
+
   return (
     <DropdownScope dropdownScopeId={getScopeIdFromComponentId(dropdownId)}>
       <div ref={containerRef} className={className}>

diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/useDropdown.ts b/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/useDropdown.ts
@@ -1,4 +1,4 @@
-import { useRecoilState } from 'recoil';
+import { useRecoilCallback, useRecoilState } from 'recoil';
 
 import { useDropdownStates } from '@/ui/layout/dropdown/hooks/internal/useDropdownStates';
 import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
@@ -56,6 +56,16 @@ export const useDropdown = (dropdownId?: string) => {
     }
   };
 
+  const resetDropdown = useRecoilCallback(
+    ({ reset }) =>
+      () => {
+        reset(dropdownHotkeyScopeState);
+        reset(dropdownWidthState);
+        reset(isDropdownOpenState);
+      },
+    [dropdownHotkeyScopeState, dropdownWidthState, isDropdownOpenState],
+  );
+
   return {
     scopeId,
     isDropdownOpen,
@@ -66,5 +76,6 @@ export const useDropdown = (dropdownId?: string) => {
     setDropdownWidth,
     dropdownPlacement,
     setDropdownPlacement,
+    resetDropdown,
   };
 };