fix: improve the mouse tracker hook (#1666)

Author: silviuaavram

src/hooks/useCombobox/index.js

@@ -96,24 +96,22 @@ function useCombobox(userProps = {}) {
       previousResultCountRef.current = items.length
     }
   })
+
+  const handleBlurInTracker = useCallback(
+    function handleBlur() {
+      if (latest.current.state.isOpen) {
+        dispatch({
+          type: stateChangeTypes.InputBlur,
+        })
+      }
+    },
+    [dispatch, latest],
+  )
+  const downshiftRefs = useMemo(() => [menuRef, toggleButtonRef, inputRef], [])
   const mouseAndTouchTrackers = useMouseAndTouchTracker(
     environment,
-    useCallback(
-      function handleBlur() {
-        if (latest.current.state.isOpen) {
-          dispatch({
-            type: stateChangeTypes.InputBlur,
-            selectItem: false,
-          })
-        }
-      },
-      [dispatch, latest],
-    ),
-    useMemo(
-      () => [menuRef, toggleButtonRef, inputRef],
-      // dependencies can be left empty because refs are getting mutated
-      [],
-    ),
+    handleBlurInTracker,
+    downshiftRefs
   )
   const setGetterPropCallInfo = useGetterPropsCalledChecker(
     'getInputProps',

src/hooks/useSelect/index.js

@@ -119,23 +119,21 @@ function useSelect(userProps = {}) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
+  const handleBlurInTracker = useCallback(
+    function handleBlur() {
+      if (latest.current.state.isOpen) {
+        dispatch({
+          type: stateChangeTypes.ToggleButtonBlur,
+        })
+      }
+    },
+    [dispatch, latest],
+  )
+  const downshiftRefs = useMemo(() => [menuRef, toggleButtonRef], [])
   const mouseAndTouchTrackers = useMouseAndTouchTracker(
     environment,
-    useCallback(
-      function handleBlur() {
-        if (latest.current.state.isOpen) {
-          dispatch({
-            type: stateChangeTypes.ToggleButtonBlur,
-          })
-        }
-      },
-      [dispatch, latest],
-    ),
-    useMemo(
-      () => [menuRef, toggleButtonRef],
-      // dependencies can be left empty because refs are getting mutated
-      [],
-    ),
+    handleBlurInTracker,
+    downshiftRefs,
   )
   const setGetterPropCallInfo = useGetterPropsCalledChecker(
     'getMenuProps',

src/hooks/utils.js

@@ -374,18 +374,18 @@ function getHighlightedIndexOnOpen(props, state, offset) {
 function useMouseAndTouchTracker(
   environment,
   handleBlur,
-  downshiftElementsRefs,
+  downshiftRefs,
 ) {
   const mouseAndTouchTrackersRef = useRef({
     isMouseDown: false,
     isTouchMove: false,
     isTouchEnd: false,
   })
 
-  // the elements should be retrieved the moment they are required because these are refs - they can be mutated
-  function getDownshiftElements() {
-    return downshiftElementsRefs.map(ref => ref.current)
-  }
+const getDownshiftElements = useCallback(
+  () => downshiftRefs.map(ref => ref.current),
+  [downshiftRefs],
+);
 
   useEffect(() => {
     if (isReactNative || !environment) {
@@ -441,7 +441,7 @@ function useMouseAndTouchTracker(
       environment.removeEventListener('touchmove', onTouchMove)
       environment.removeEventListener('touchend', onTouchEnd)
     }
-  }, [downshiftElementsRefs, environment, handleBlur])
+  }, [environment, getDownshiftElements, handleBlur])
 
   return mouseAndTouchTrackersRef.current
 }