From 7901dbc02f14c7d4478961a081ffbfda0420fc8b Mon Sep 17 00:00:00 2001
From: Harshit Singh <73997189+harshit078@users.noreply.github.com>
Date: Tue, 29 Oct 2024 14:33:28 +0530
Subject: [PATCH] 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 <baptiste@devessier.fr>
---
 .../ui/layout/dropdown/components/Dropdown.tsx      |  7 +++++++
 .../modules/ui/layout/dropdown/hooks/useDropdown.ts | 13 ++++++++++++-
 2 files changed, 19 insertions(+), 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
index c6d5205e3..c4d62a560 100644
--- 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
index 24225beab..1386773d7 100644
--- 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,
   };
 };