fix: read elements from refs directly instead of keeping stale values in closure (#1662)

Author: mindtraveller

src/hooks/useCombobox/index.js

@@ -111,7 +111,8 @@ function useCombobox(userProps = {}) {
     ),
     useMemo(
       () => [menuRef, toggleButtonRef, inputRef],
-      [menuRef.current, toggleButtonRef.current, inputRef.current],
+      // dependencies can be left empty because refs are getting mutated
+      [],
     ),
   )
   const setGetterPropCallInfo = useGetterPropsCalledChecker(

src/hooks/useSelect/index.js

@@ -133,7 +133,8 @@ function useSelect(userProps = {}) {
     ),
     useMemo(
       () => [menuRef, toggleButtonRef],
-      [menuRef.current, toggleButtonRef.current],
+      // dependencies can be left empty because refs are getting mutated
+      [],
     ),
   )
   const setGetterPropCallInfo = useGetterPropsCalledChecker(

src/hooks/utils.js

@@ -375,13 +375,16 @@ function useMouseAndTouchTracker(
     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)
+  }
+
   useEffect(() => {
     if (isReactNative || !environment) {
       return noop
     }
 
-    const downshiftElements = downshiftElementsRefs.map(ref => ref.current)
-
     function onMouseDown() {
       mouseAndTouchTrackersRef.current.isTouchEnd = false // reset this one.
       mouseAndTouchTrackersRef.current.isMouseDown = true
@@ -390,7 +393,7 @@ function useMouseAndTouchTracker(
       mouseAndTouchTrackersRef.current.isMouseDown = false
 
       if (
-        !targetWithinDownshift(event.target, downshiftElements, environment)
+        !targetWithinDownshift(event.target, getDownshiftElements(), environment)
       ) {
         handleBlur()
       }
@@ -409,7 +412,7 @@ function useMouseAndTouchTracker(
         !mouseAndTouchTrackersRef.current.isTouchMove &&
         !targetWithinDownshift(
           event.target,
-          downshiftElements,
+          getDownshiftElements(),
           environment,
           false,
         )