fix: dropdown menu doesn't close and remains open (twentyhq#8302)

## Description - Fixes twentyhq#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 <[email protected]>
ad-elias · Nov 8, 2024 · 0381996 · 0381996
1 parent 045f569
commit 0381996
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 3 deletions.
diff --git a/...modules/object-record/record-field/meta-types/input/components/MultiItemFieldMenuItem.tsx b/...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/...ront/src/modules/ui/input/components/internal/currency/types/CurrencyPickerHotkeyScope.ts b/...ront/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/...odules/ui/input/components/internal/phone/components/PhoneCountryPickerDropdownButton.tsx b/...odules/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) => {