From 0381996fb90dcaff7fe8883e760f3a24061a7218 Mon Sep 17 00:00:00 2001
From: Harshit Singh <73997189+harshit078@users.noreply.github.com>
Date: Fri, 8 Nov 2024 21:43:15 +0530
Subject: [PATCH] fix: dropdown menu doesn't close and remains open (#8302)

## Description

- Fixes #8285
- Added fix for both Currency and PhoneCountry dropdown

## Changes



https://github.com/user-attachments/assets/cbf85100-7791-40da-a676-2c87c6a32976

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
---
 .../meta-types/input/components/MultiItemFieldMenuItem.tsx | 7 ++++++-
 .../internal/currency/types/CurrencyPickerHotkeyScope.ts   | 2 +-
 .../phone/components/PhoneCountryPickerDropdownButton.tsx  | 2 +-
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiItemFieldMenuItem.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiItemFieldMenuItem.tsx
index b980ff0bcdc3..b0d5d77fdac3 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiItemFieldMenuItem.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiItemFieldMenuItem.tsx
@@ -35,7 +35,12 @@ export const MultiItemFieldMenuItem = <T,>({
   const { isDropdownOpen, closeDropdown } = useDropdown(dropdownId);
 
   const handleMouseEnter = () => setIsHovered(true);
-  const handleMouseLeave = () => setIsHovered(false);
+  const handleMouseLeave = () => {
+    setIsHovered(false);
+    if (isDropdownOpen) {
+      closeDropdown();
+    }
+  };
 
   const handleDeleteClick = () => {
     closeDropdown();
diff --git a/packages/twenty-front/src/modules/ui/input/components/internal/currency/types/CurrencyPickerHotkeyScope.ts b/packages/twenty-front/src/modules/ui/input/components/internal/currency/types/CurrencyPickerHotkeyScope.ts
index cfeaebd04a65..e6e54967c9ae 100644
--- a/packages/twenty-front/src/modules/ui/input/components/internal/currency/types/CurrencyPickerHotkeyScope.ts
+++ b/packages/twenty-front/src/modules/ui/input/components/internal/currency/types/CurrencyPickerHotkeyScope.ts
@@ -1,3 +1,3 @@
 export enum CurrencyPickerHotkeyScope {
-  CurrencyPicker = 'currency-picker',
+  CurrencyPicker = 'currency-picker-dropdown-id',
 }
diff --git a/packages/twenty-front/src/modules/ui/input/components/internal/phone/components/PhoneCountryPickerDropdownButton.tsx b/packages/twenty-front/src/modules/ui/input/components/internal/phone/components/PhoneCountryPickerDropdownButton.tsx
index ba7e722d3adc..614758963e92 100644
--- a/packages/twenty-front/src/modules/ui/input/components/internal/phone/components/PhoneCountryPickerDropdownButton.tsx
+++ b/packages/twenty-front/src/modules/ui/input/components/internal/phone/components/PhoneCountryPickerDropdownButton.tsx
@@ -70,7 +70,7 @@ export const PhoneCountryPickerDropdownButton = ({
   const [selectedCountry, setSelectedCountry] = useState<Country>();
 
   const { isDropdownOpen, closeDropdown } = useDropdown(
-    CountryPickerHotkeyScope.CountryPicker,
+    'country-picker-dropdown-id',
   );
 
   const handleChange = (countryCode: string) => {