From d887a857ca4cd82a25a14471fb3e311ada01dd47 Mon Sep 17 00:00:00 2001
From: Baptiste Devessier <baptiste@devessier.fr>
Date: Tue, 29 Oct 2024 15:55:18 +0100
Subject: [PATCH] Revert "fix: Country Dropdown not closing with AddressInput "
 (#8174)

Reverts twentyhq/twenty#8147
---
 .../ui/field/input/components/AddressInput.tsx      |  8 ++++++++
 .../ui/layout/dropdown/components/Dropdown.tsx      |  7 -------
 .../modules/ui/layout/dropdown/hooks/useDropdown.ts | 13 +------------
 3 files changed, 9 insertions(+), 19 deletions(-)

diff --git a/packages/twenty-front/src/modules/ui/field/input/components/AddressInput.tsx b/packages/twenty-front/src/modules/ui/field/input/components/AddressInput.tsx
index c1dc5704d..c4c574303 100644
--- a/packages/twenty-front/src/modules/ui/field/input/components/AddressInput.tsx
+++ b/packages/twenty-front/src/modules/ui/field/input/components/AddressInput.tsx
@@ -5,7 +5,9 @@ import { Key } from 'ts-key-enum';
 import { FieldAddressDraftValue } from '@/object-record/record-field/types/FieldInputDraftValue';
 import { FieldAddressValue } from '@/object-record/record-field/types/FieldMetadata';
 import { CountrySelect } from '@/ui/input/components/internal/country/components/CountrySelect';
+import { SELECT_COUNTRY_DROPDOWN_ID } from '@/ui/input/components/internal/country/constants/SelectCountryDropdownId';
 import { TextInputV2 } from '@/ui/input/components/TextInputV2';
+import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { useClickOutsideListener } from '@/ui/utilities/pointer-event/hooks/useClickOutsideListener';
 import { MOBILE_VIEWPORT } from 'twenty-ui';
@@ -93,6 +95,10 @@ export const AddressInput = ({
   const [focusPosition, setFocusPosition] =
     useState<keyof FieldAddressDraftValue>('addressStreet1');
 
+  const { closeDropdown: closeCountryDropdown } = useDropdown(
+    SELECT_COUNTRY_DROPDOWN_ID,
+  );
+
   const wrapperRef = useRef<HTMLDivElement>(null);
 
   const getChangeHandler =
@@ -186,6 +192,8 @@ export const AddressInput = ({
     callback: (event) => {
       event.stopImmediatePropagation();
 
+      closeCountryDropdown();
+
       onClickOutside?.(event, internalValue);
     },
     enabled: isDefined(onClickOutside),
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 ce7c7dbb4..66da5ded5 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
@@ -71,7 +71,6 @@ export const Dropdown = ({
     closeDropdown,
     dropdownWidth,
     setDropdownPlacement,
-    resetDropdown,
   } = useDropdown(dropdownId);
 
   const offsetMiddlewares = [];
@@ -144,12 +143,6 @@ 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 1386773d7..24225beab 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 { useRecoilCallback, useRecoilState } from 'recoil';
+import { useRecoilState } from 'recoil';
 
 import { useDropdownStates } from '@/ui/layout/dropdown/hooks/internal/useDropdownStates';
 import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
@@ -56,16 +56,6 @@ export const useDropdown = (dropdownId?: string) => {
     }
   };
 
-  const resetDropdown = useRecoilCallback(
-    ({ reset }) =>
-      () => {
-        reset(dropdownHotkeyScopeState);
-        reset(dropdownWidthState);
-        reset(isDropdownOpenState);
-      },
-    [dropdownHotkeyScopeState, dropdownWidthState, isDropdownOpenState],
-  );
-
   return {
     scopeId,
     isDropdownOpen,
@@ -76,6 +66,5 @@ export const useDropdown = (dropdownId?: string) => {
     setDropdownWidth,
     dropdownPlacement,
     setDropdownPlacement,
-    resetDropdown,
   };
 };