From 630e4780b8d698e7ab1952ea0f1602af0a0df2e0 Mon Sep 17 00:00:00 2001
From: Lucas Bordeau <bordeau.lucas@gmail.com>
Date: Wed, 28 May 2025 16:05:57 +0200
Subject: [PATCH] Fixed IconPicker infinite loop (#12356)

This PR fixes an infinite loop that was appearing on IconPicker, since
it was about setting and unsetting the hotkey scope, it wasn't really
noticeable.

The direct cause was using the mouse enter and mouse leave events to set
and unset the hotkey scope, without using a local state to prevent race
condition, so this PR just adds this local state.

Fixes https://github.com/twentyhq/twenty/issues/12344
---
 .../ui/input/components/IconPicker.tsx        | 26 ++++++++++++++-----
 1 file changed, 20 insertions(+), 6 deletions(-)

diff --git a/packages/twenty-front/src/modules/ui/input/components/IconPicker.tsx b/packages/twenty-front/src/modules/ui/input/components/IconPicker.tsx
index 24d70d8f7..f0e6388c7 100644
--- a/packages/twenty-front/src/modules/ui/input/components/IconPicker.tsx
+++ b/packages/twenty-front/src/modules/ui/input/components/IconPicker.tsx
@@ -107,6 +107,24 @@ export const IconPicker = ({
     setHotkeyScopeAndMemorizePreviousScope,
   } = usePreviousHotkeyScope();
 
+  const [isMouseInsideIconList, setIsMouseInsideIconList] = useState(false);
+
+  const handleMouseEnter = () => {
+    if (!isMouseInsideIconList) {
+      setIsMouseInsideIconList(true);
+      setHotkeyScopeAndMemorizePreviousScope({
+        scope: IconPickerHotkeyScope.IconPicker,
+      });
+    }
+  };
+
+  const handleMouseLeave = () => {
+    if (isMouseInsideIconList) {
+      setIsMouseInsideIconList(false);
+      goBackToPreviousHotkeyScope();
+    }
+  };
+
   const { closeDropdown } = useDropdown(dropdownId);
 
   const { getIcons, getIcon } = useIcons();
@@ -196,12 +214,8 @@ export const IconPicker = ({
               />
               <DropdownMenuSeparator />
               <div
-                onMouseEnter={() => {
-                  setHotkeyScopeAndMemorizePreviousScope({
-                    scope: IconPickerHotkeyScope.IconPicker,
-                  });
-                }}
-                onMouseLeave={goBackToPreviousHotkeyScope}
+                onMouseEnter={handleMouseEnter}
+                onMouseLeave={handleMouseLeave}
               >
                 <DropdownMenuItemsContainer>
                   <StyledMenuIconItemsContainer>