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

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>