From 893d22b32afbe71d40b67c5aff56ad95a272c1e5 Mon Sep 17 00:00:00 2001
From: Chris Short <13677134+devcshort@users.noreply.github.com>
Date: Fri, 18 Oct 2024 08:09:55 -0700
Subject: [PATCH] hotfix: Mouse hover gets ignored if it's not movinga and the
 user is typing (#202)

---
 src/shared/components/ui/autocomplete.tsx | 29 ++++++++++++++++++++++-
 1 file changed, 28 insertions(+), 1 deletion(-)

diff --git a/src/shared/components/ui/autocomplete.tsx b/src/shared/components/ui/autocomplete.tsx
index 9553ffe..a6a1a23 100644
--- a/src/shared/components/ui/autocomplete.tsx
+++ b/src/shared/components/ui/autocomplete.tsx
@@ -47,6 +47,31 @@ export type AutocompleteProps = {
   autoSelectIndex?: number;
 };
 
+const useMouseMovement = () => {
+  const [isMoving, setIsMoving] = useState(false);
+
+  useEffect(() => {
+    let timeoutId;
+
+    const handleMouseMove = () => {
+      setIsMoving(true);
+
+      clearTimeout(timeoutId);
+      timeoutId = setTimeout(() => {
+        setIsMoving(false);
+      }, 100);
+    };
+
+    window.addEventListener('mousemove', handleMouseMove);
+    return () => {
+      window.removeEventListener('mousemove', handleMouseMove);
+      clearTimeout(timeoutId);
+    };
+  }, []);
+
+  return isMoving;
+};
+
 export function Autocomplete(props: AutocompleteProps) {
   const {
     inputProps,
@@ -59,6 +84,7 @@ export function Autocomplete(props: AutocompleteProps) {
     value: inputValue,
     ...rest
   } = props;
+  const isMouseMoving = useMouseMovement();
   const [lastManualInput, setLastManualInput] = useState('');
   const [uniqueId, setUnqiueId] = useState('');
   const [open, setOpen] = useState(false);
@@ -349,6 +375,7 @@ export function Autocomplete(props: AutocompleteProps) {
   const handleOptionMouseEnter = useCallback(
     (index: number) => {
       return () => {
+        if (!isMouseMoving) return;
         const nextOption = rest.options[index];
         const selectionValue = nextOption?.value;
         setCurrentIndex(index);
@@ -357,7 +384,7 @@ export function Autocomplete(props: AutocompleteProps) {
         setIsHovering(true);
       };
     },
-    [rest.options, setInputSelectionPoint, setValue],
+    [rest.options, setInputSelectionPoint, setValue, isMouseMoving],
   );
 
   const handleOptionMouseExit = useCallback(() => {