downshift 8.4.0 → 8.5.0

package/dist/downshift.cjs.js

@@ -1828,17 +1828,15 @@ function getHighlightedIndexOnOpen(props, state, offset) {
   }
   return offset < 0 ? items.length - 1 : 0;
 }
-
 /**
- * Reuse the movement tracking of mouse and touch events.
+ * Tracks mouse and touch events, such as mouseDown, touchMove and touchEnd.
  *
- * @param {boolean} isOpen Whether the dropdown is open or not.
- * @param {Array<Object>} downshiftElementRefs Downshift element refs to track movement (toggleButton, menu etc.)
- * @param {Object} environment Environment where component/hook exists.
- * @param {Function} handleBlur Handler on blur from mouse or touch.
- * @returns {Object} Ref containing whether mouseDown or touchMove event is happening
+ * @param {Object} environment The environment to add the event listeners to, for instance window.
+ * @param {Array<HTMLElement>} downshiftElementRefs The refs for the element that should not trigger a blur action from mouseDown or touchEnd.
+ * @param {Function} handleBlur The function that is called if mouseDown or touchEnd occured outside the downshiftElements.
+ * @returns {Object} The mouse and touch events information, if any of are happening.
  */
-function useMouseAndTouchTracker(isOpen, downshiftElementRefs, environment, handleBlur) {
+function useMouseAndTouchTracker(environment, downshiftElementRefs, handleBlur) {
   var mouseAndTouchTrackersRef = React.useRef({
     isMouseDown: false,
     isTouchMove: false,
@@ -1846,45 +1844,39 @@ function useMouseAndTouchTracker(isOpen, downshiftElementRefs, environment, hand
   });
   React.useEffect(function () {
     if (!environment) {
-      return;
+      return noop;
     }
-
-    // The same strategy for checking if a click occurred inside or outside downshift
-    // as in downshift.js.
-    var onMouseDown = function onMouseDown() {
+    var downshiftElements = downshiftElementRefs.map(function (ref) {
+      return ref.current;
+    });
+    function onMouseDown() {
       mouseAndTouchTrackersRef.current.isTouchEnd = false; // reset this one.
       mouseAndTouchTrackersRef.current.isMouseDown = true;
-    };
-    var onMouseUp = function onMouseUp(event) {
+    }
+    function onMouseUp(event) {
       mouseAndTouchTrackersRef.current.isMouseDown = false;
-      if (isOpen && !targetWithinDownshift(event.target, downshiftElementRefs.map(function (ref) {
-        return ref.current;
-      }), environment)) {
+      if (!targetWithinDownshift(event.target, downshiftElements, environment)) {
         handleBlur();
       }
-    };
-    var onTouchStart = function onTouchStart() {
+    }
+    function onTouchStart() {
       mouseAndTouchTrackersRef.current.isTouchEnd = false;
       mouseAndTouchTrackersRef.current.isTouchMove = false;
-    };
-    var onTouchMove = function onTouchMove() {
+    }
+    function onTouchMove() {
       mouseAndTouchTrackersRef.current.isTouchMove = true;
-    };
-    var onTouchEnd = function onTouchEnd(event) {
+    }
+    function onTouchEnd(event) {
       mouseAndTouchTrackersRef.current.isTouchEnd = true;
-      if (isOpen && !mouseAndTouchTrackersRef.current.isTouchMove && !targetWithinDownshift(event.target, downshiftElementRefs.map(function (ref) {
-        return ref.current;
-      }), environment, false)) {
+      if (!mouseAndTouchTrackersRef.current.isTouchMove && !targetWithinDownshift(event.target, downshiftElements, environment, false)) {
         handleBlur();
       }
-    };
+    }
     environment.addEventListener('mousedown', onMouseDown);
     environment.addEventListener('mouseup', onMouseUp);
     environment.addEventListener('touchstart', onTouchStart);
     environment.addEventListener('touchmove', onTouchMove);
     environment.addEventListener('touchend', onTouchEnd);
-
-    // eslint-disable-next-line consistent-return
     return function cleanup() {
       environment.removeEventListener('mousedown', onMouseDown);
       environment.removeEventListener('mouseup', onMouseUp);
@@ -1892,9 +1884,9 @@ function useMouseAndTouchTracker(isOpen, downshiftElementRefs, environment, hand
       environment.removeEventListener('touchmove', onTouchMove);
       environment.removeEventListener('touchend', onTouchEnd);
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isOpen, environment]);
-  return mouseAndTouchTrackersRef;
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- refs don't change
+  }, [environment, handleBlur]);
+  return mouseAndTouchTrackersRef.current;
 }
 
 /* istanbul ignore next */
@@ -2487,12 +2479,13 @@ function useSelect(userProps) {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  // Add mouse/touch events to document.
-  var mouseAndTouchTrackersRef = useMouseAndTouchTracker(isOpen, [menuRef, toggleButtonRef], environment, function () {
-    dispatch({
-      type: ToggleButtonBlur
-    });
-  });
+  var mouseAndTouchTrackers = useMouseAndTouchTracker(environment, [toggleButtonRef, menuRef], React.useCallback(function handleBlur() {
+    if (latest.current.state.isOpen) {
+      dispatch({
+        type: ToggleButtonBlur
+      });
+    }
+  }, [dispatch, latest]));
   var setGetterPropCallInfo = useGetterPropsCalledChecker('getMenuProps', 'getToggleButtonProps');
   // Reset itemRefs on close.
   React.useEffect(function () {
@@ -2678,7 +2671,7 @@ function useSelect(userProps) {
       });
     };
     var toggleButtonHandleBlur = function toggleButtonHandleBlur() {
-      if (latestState.isOpen && !mouseAndTouchTrackersRef.current.isMouseDown) {
+      if (latestState.isOpen && !mouseAndTouchTrackers.isMouseDown) {
         dispatch({
           type: ToggleButtonBlur
         });
@@ -2707,7 +2700,7 @@ function useSelect(userProps) {
     }
     setGetterPropCallInfo('getToggleButtonProps', suppressRefError, refKey, toggleButtonRef);
     return toggleProps;
-  }, [latest, elementIds, setGetterPropCallInfo, dispatch, mouseAndTouchTrackersRef, toggleButtonKeyDownHandlers]);
+  }, [dispatch, elementIds, latest, mouseAndTouchTrackers, setGetterPropCallInfo, toggleButtonKeyDownHandlers]);
   var getItemProps = React.useCallback(function (_temp6) {
     var _extends4;
     var _ref6 = _temp6 === void 0 ? {} : _temp6,
@@ -2733,7 +2726,7 @@ function useSelect(userProps) {
       index = _getItemAndIndex[1];
     var disabled = latestProps.isItemDisabled(item, index);
     var itemHandleMouseMove = function itemHandleMouseMove() {
-      if (mouseAndTouchTrackersRef.current.isTouchEnd || index === latestState.highlightedIndex) {
+      if (mouseAndTouchTrackers.isTouchEnd || index === latestState.highlightedIndex) {
         return;
       }
       shouldScrollRef.current = false;
@@ -2767,7 +2760,7 @@ function useSelect(userProps) {
     itemProps.onMouseMove = callAllEventHandlers(onMouseMove, itemHandleMouseMove);
     itemProps.onMouseDown = callAllEventHandlers(onMouseDown, itemHandleMouseDown);
     return itemProps;
-  }, [latest, elementIds, mouseAndTouchTrackersRef, shouldScrollRef, dispatch]);
+  }, [latest, elementIds, mouseAndTouchTrackers, shouldScrollRef, dispatch]);
   return {
     // prop getters.
     getToggleButtonProps: getToggleButtonProps,
@@ -3128,13 +3121,14 @@ function useCombobox(userProps) {
       previousResultCountRef.current = items.length;
     }
   });
-  // Add mouse/touch events to document.
-  var mouseAndTouchTrackersRef = useMouseAndTouchTracker(isOpen, [inputRef, menuRef, toggleButtonRef], environment, function () {
-    dispatch({
-      type: InputBlur,
-      selectItem: false
-    });
-  });
+  var mouseAndTouchTrackers = useMouseAndTouchTracker(environment, [toggleButtonRef, menuRef, inputRef], React.useCallback(function handleBlur() {
+    if (latest.current.state.isOpen) {
+      dispatch({
+        type: InputBlur,
+        selectItem: false
+      });
+    }
+  }, [dispatch, latest]));
   var setGetterPropCallInfo = useGetterPropsCalledChecker('getInputProps', 'getMenuProps');
   // Reset itemRefs on close.
   React.useEffect(function () {
@@ -3282,7 +3276,7 @@ function useCombobox(userProps) {
     var onSelectKey = 'onClick';
     var customClickHandler = onClick;
     var itemHandleMouseMove = function itemHandleMouseMove() {
-      if (mouseAndTouchTrackersRef.current.isTouchEnd || index === latestState.highlightedIndex) {
+      if (mouseAndTouchTrackers.isTouchEnd || index === latestState.highlightedIndex) {
         return;
       }
       shouldScrollRef.current = false;
@@ -3310,7 +3304,7 @@ function useCombobox(userProps) {
       onMouseMove: callAllEventHandlers(onMouseMove, itemHandleMouseMove),
       onMouseDown: callAllEventHandlers(onMouseDown, itemHandleMouseDown)
     }, rest);
-  }, [dispatch, elementIds, latest, mouseAndTouchTrackersRef, shouldScrollRef]);
+  }, [dispatch, elementIds, latest, mouseAndTouchTrackers, shouldScrollRef]);
   var getToggleButtonProps = React.useCallback(function (_temp4) {
     var _extends4;
     var _ref5 = _temp4 === void 0 ? {} : _temp4,
@@ -3364,7 +3358,7 @@ function useCombobox(userProps) {
     };
     var inputHandleBlur = function inputHandleBlur(event) {
       /* istanbul ignore else */
-      if (environment != null && environment.document && latestState.isOpen && !mouseAndTouchTrackersRef.current.isMouseDown) {
+      if (environment != null && environment.document && latestState.isOpen && !mouseAndTouchTrackers.isMouseDown) {
         var isBlurByTabChange = event.relatedTarget === null && environment.document.activeElement !== environment.document.body;
         dispatch({
           type: InputBlur,
@@ -3388,7 +3382,7 @@ function useCombobox(userProps) {
     return _extends__default["default"]((_extends5 = {}, _extends5[refKey] = handleRefs(ref, function (inputNode) {
       inputRef.current = inputNode;
     }), _extends5['aria-activedescendant'] = latestState.isOpen && latestState.highlightedIndex > -1 ? elementIds.getItemId(latestState.highlightedIndex) : '', _extends5['aria-autocomplete'] = 'list', _extends5['aria-controls'] = elementIds.menuId, _extends5['aria-expanded'] = latestState.isOpen, _extends5['aria-labelledby'] = rest && rest['aria-label'] ? undefined : elementIds.labelId, _extends5.autoComplete = 'off', _extends5.id = elementIds.inputId, _extends5.role = 'combobox', _extends5.value = latestState.inputValue, _extends5), eventHandlers, rest);
-  }, [setGetterPropCallInfo, latest, elementIds, inputKeyDownHandlers, dispatch, mouseAndTouchTrackersRef, environment]);
+  }, [dispatch, elementIds, environment, inputKeyDownHandlers, latest, mouseAndTouchTrackers, setGetterPropCallInfo]);
 
   // returns
   var toggleMenu = React.useCallback(function () {

package/dist/downshift.esm.js

@@ -1815,17 +1815,15 @@ function getHighlightedIndexOnOpen(props, state, offset) {
   }
   return offset < 0 ? items.length - 1 : 0;
 }
-
 /**
- * Reuse the movement tracking of mouse and touch events.
+ * Tracks mouse and touch events, such as mouseDown, touchMove and touchEnd.
  *
- * @param {boolean} isOpen Whether the dropdown is open or not.
- * @param {Array<Object>} downshiftElementRefs Downshift element refs to track movement (toggleButton, menu etc.)
- * @param {Object} environment Environment where component/hook exists.
- * @param {Function} handleBlur Handler on blur from mouse or touch.
- * @returns {Object} Ref containing whether mouseDown or touchMove event is happening
+ * @param {Object} environment The environment to add the event listeners to, for instance window.
+ * @param {Array<HTMLElement>} downshiftElementRefs The refs for the element that should not trigger a blur action from mouseDown or touchEnd.
+ * @param {Function} handleBlur The function that is called if mouseDown or touchEnd occured outside the downshiftElements.
+ * @returns {Object} The mouse and touch events information, if any of are happening.
  */
-function useMouseAndTouchTracker(isOpen, downshiftElementRefs, environment, handleBlur) {
+function useMouseAndTouchTracker(environment, downshiftElementRefs, handleBlur) {
   var mouseAndTouchTrackersRef = useRef({
     isMouseDown: false,
     isTouchMove: false,
@@ -1833,45 +1831,39 @@ function useMouseAndTouchTracker(isOpen, downshiftElementRefs, environment, hand
   });
   useEffect(function () {
     if (!environment) {
-      return;
+      return noop;
     }
-
-    // The same strategy for checking if a click occurred inside or outside downshift
-    // as in downshift.js.
-    var onMouseDown = function onMouseDown() {
+    var downshiftElements = downshiftElementRefs.map(function (ref) {
+      return ref.current;
+    });
+    function onMouseDown() {
       mouseAndTouchTrackersRef.current.isTouchEnd = false; // reset this one.
       mouseAndTouchTrackersRef.current.isMouseDown = true;
-    };
-    var onMouseUp = function onMouseUp(event) {
+    }
+    function onMouseUp(event) {
       mouseAndTouchTrackersRef.current.isMouseDown = false;
-      if (isOpen && !targetWithinDownshift(event.target, downshiftElementRefs.map(function (ref) {
-        return ref.current;
-      }), environment)) {
+      if (!targetWithinDownshift(event.target, downshiftElements, environment)) {
         handleBlur();
       }
-    };
-    var onTouchStart = function onTouchStart() {
+    }
+    function onTouchStart() {
       mouseAndTouchTrackersRef.current.isTouchEnd = false;
       mouseAndTouchTrackersRef.current.isTouchMove = false;
-    };
-    var onTouchMove = function onTouchMove() {
+    }
+    function onTouchMove() {
       mouseAndTouchTrackersRef.current.isTouchMove = true;
-    };
-    var onTouchEnd = function onTouchEnd(event) {
+    }
+    function onTouchEnd(event) {
       mouseAndTouchTrackersRef.current.isTouchEnd = true;
-      if (isOpen && !mouseAndTouchTrackersRef.current.isTouchMove && !targetWithinDownshift(event.target, downshiftElementRefs.map(function (ref) {
-        return ref.current;
-      }), environment, false)) {
+      if (!mouseAndTouchTrackersRef.current.isTouchMove && !targetWithinDownshift(event.target, downshiftElements, environment, false)) {
         handleBlur();
       }
-    };
+    }
     environment.addEventListener('mousedown', onMouseDown);
     environment.addEventListener('mouseup', onMouseUp);
     environment.addEventListener('touchstart', onTouchStart);
     environment.addEventListener('touchmove', onTouchMove);
     environment.addEventListener('touchend', onTouchEnd);
-
-    // eslint-disable-next-line consistent-return
     return function cleanup() {
       environment.removeEventListener('mousedown', onMouseDown);
       environment.removeEventListener('mouseup', onMouseUp);
@@ -1879,9 +1871,9 @@ function useMouseAndTouchTracker(isOpen, downshiftElementRefs, environment, hand
       environment.removeEventListener('touchmove', onTouchMove);
       environment.removeEventListener('touchend', onTouchEnd);
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isOpen, environment]);
-  return mouseAndTouchTrackersRef;
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- refs don't change
+  }, [environment, handleBlur]);
+  return mouseAndTouchTrackersRef.current;
 }
 
 /* istanbul ignore next */
@@ -2474,12 +2466,13 @@ function useSelect(userProps) {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  // Add mouse/touch events to document.
-  var mouseAndTouchTrackersRef = useMouseAndTouchTracker(isOpen, [menuRef, toggleButtonRef], environment, function () {
-    dispatch({
-      type: ToggleButtonBlur
-    });
-  });
+  var mouseAndTouchTrackers = useMouseAndTouchTracker(environment, [toggleButtonRef, menuRef], useCallback(function handleBlur() {
+    if (latest.current.state.isOpen) {
+      dispatch({
+        type: ToggleButtonBlur
+      });
+    }
+  }, [dispatch, latest]));
   var setGetterPropCallInfo = useGetterPropsCalledChecker('getMenuProps', 'getToggleButtonProps');
   // Reset itemRefs on close.
   useEffect(function () {
@@ -2665,7 +2658,7 @@ function useSelect(userProps) {
       });
     };
     var toggleButtonHandleBlur = function toggleButtonHandleBlur() {
-      if (latestState.isOpen && !mouseAndTouchTrackersRef.current.isMouseDown) {
+      if (latestState.isOpen && !mouseAndTouchTrackers.isMouseDown) {
         dispatch({
           type: ToggleButtonBlur
         });
@@ -2694,7 +2687,7 @@ function useSelect(userProps) {
     }
     setGetterPropCallInfo('getToggleButtonProps', suppressRefError, refKey, toggleButtonRef);
     return toggleProps;
-  }, [latest, elementIds, setGetterPropCallInfo, dispatch, mouseAndTouchTrackersRef, toggleButtonKeyDownHandlers]);
+  }, [dispatch, elementIds, latest, mouseAndTouchTrackers, setGetterPropCallInfo, toggleButtonKeyDownHandlers]);
   var getItemProps = useCallback(function (_temp6) {
     var _extends4;
     var _ref6 = _temp6 === void 0 ? {} : _temp6,
@@ -2720,7 +2713,7 @@ function useSelect(userProps) {
       index = _getItemAndIndex[1];
     var disabled = latestProps.isItemDisabled(item, index);
     var itemHandleMouseMove = function itemHandleMouseMove() {
-      if (mouseAndTouchTrackersRef.current.isTouchEnd || index === latestState.highlightedIndex) {
+      if (mouseAndTouchTrackers.isTouchEnd || index === latestState.highlightedIndex) {
         return;
       }
       shouldScrollRef.current = false;
@@ -2754,7 +2747,7 @@ function useSelect(userProps) {
     itemProps.onMouseMove = callAllEventHandlers(onMouseMove, itemHandleMouseMove);
     itemProps.onMouseDown = callAllEventHandlers(onMouseDown, itemHandleMouseDown);
     return itemProps;
-  }, [latest, elementIds, mouseAndTouchTrackersRef, shouldScrollRef, dispatch]);
+  }, [latest, elementIds, mouseAndTouchTrackers, shouldScrollRef, dispatch]);
   return {
     // prop getters.
     getToggleButtonProps: getToggleButtonProps,
@@ -3115,13 +3108,14 @@ function useCombobox(userProps) {
       previousResultCountRef.current = items.length;
     }
   });
-  // Add mouse/touch events to document.
-  var mouseAndTouchTrackersRef = useMouseAndTouchTracker(isOpen, [inputRef, menuRef, toggleButtonRef], environment, function () {
-    dispatch({
-      type: InputBlur,
-      selectItem: false
-    });
-  });
+  var mouseAndTouchTrackers = useMouseAndTouchTracker(environment, [toggleButtonRef, menuRef, inputRef], useCallback(function handleBlur() {
+    if (latest.current.state.isOpen) {
+      dispatch({
+        type: InputBlur,
+        selectItem: false
+      });
+    }
+  }, [dispatch, latest]));
   var setGetterPropCallInfo = useGetterPropsCalledChecker('getInputProps', 'getMenuProps');
   // Reset itemRefs on close.
   useEffect(function () {
@@ -3269,7 +3263,7 @@ function useCombobox(userProps) {
     var onSelectKey = 'onClick';
     var customClickHandler = onClick;
     var itemHandleMouseMove = function itemHandleMouseMove() {
-      if (mouseAndTouchTrackersRef.current.isTouchEnd || index === latestState.highlightedIndex) {
+      if (mouseAndTouchTrackers.isTouchEnd || index === latestState.highlightedIndex) {
         return;
       }
       shouldScrollRef.current = false;
@@ -3297,7 +3291,7 @@ function useCombobox(userProps) {
       onMouseMove: callAllEventHandlers(onMouseMove, itemHandleMouseMove),
       onMouseDown: callAllEventHandlers(onMouseDown, itemHandleMouseDown)
     }, rest);
-  }, [dispatch, elementIds, latest, mouseAndTouchTrackersRef, shouldScrollRef]);
+  }, [dispatch, elementIds, latest, mouseAndTouchTrackers, shouldScrollRef]);
   var getToggleButtonProps = useCallback(function (_temp4) {
     var _extends4;
     var _ref5 = _temp4 === void 0 ? {} : _temp4,
@@ -3351,7 +3345,7 @@ function useCombobox(userProps) {
     };
     var inputHandleBlur = function inputHandleBlur(event) {
       /* istanbul ignore else */
-      if (environment != null && environment.document && latestState.isOpen && !mouseAndTouchTrackersRef.current.isMouseDown) {
+      if (environment != null && environment.document && latestState.isOpen && !mouseAndTouchTrackers.isMouseDown) {
         var isBlurByTabChange = event.relatedTarget === null && environment.document.activeElement !== environment.document.body;
         dispatch({
           type: InputBlur,
@@ -3375,7 +3369,7 @@ function useCombobox(userProps) {
     return _extends((_extends5 = {}, _extends5[refKey] = handleRefs(ref, function (inputNode) {
       inputRef.current = inputNode;
     }), _extends5['aria-activedescendant'] = latestState.isOpen && latestState.highlightedIndex > -1 ? elementIds.getItemId(latestState.highlightedIndex) : '', _extends5['aria-autocomplete'] = 'list', _extends5['aria-controls'] = elementIds.menuId, _extends5['aria-expanded'] = latestState.isOpen, _extends5['aria-labelledby'] = rest && rest['aria-label'] ? undefined : elementIds.labelId, _extends5.autoComplete = 'off', _extends5.id = elementIds.inputId, _extends5.role = 'combobox', _extends5.value = latestState.inputValue, _extends5), eventHandlers, rest);
-  }, [setGetterPropCallInfo, latest, elementIds, inputKeyDownHandlers, dispatch, mouseAndTouchTrackersRef, environment]);
+  }, [dispatch, elementIds, environment, inputKeyDownHandlers, latest, mouseAndTouchTrackers, setGetterPropCallInfo]);
 
   // returns
   var toggleMenu = useCallback(function () {

package/dist/downshift.native.cjs.js

@@ -1724,17 +1724,15 @@ function getHighlightedIndexOnOpen(props, state, offset) {
   }
   return offset < 0 ? items.length - 1 : 0;
 }
-
 /**
- * Reuse the movement tracking of mouse and touch events.
+ * Tracks mouse and touch events, such as mouseDown, touchMove and touchEnd.
  *
- * @param {boolean} isOpen Whether the dropdown is open or not.
- * @param {Array<Object>} downshiftElementRefs Downshift element refs to track movement (toggleButton, menu etc.)
- * @param {Object} environment Environment where component/hook exists.
- * @param {Function} handleBlur Handler on blur from mouse or touch.
- * @returns {Object} Ref containing whether mouseDown or touchMove event is happening
+ * @param {Object} environment The environment to add the event listeners to, for instance window.
+ * @param {Array<HTMLElement>} downshiftElementRefs The refs for the element that should not trigger a blur action from mouseDown or touchEnd.
+ * @param {Function} handleBlur The function that is called if mouseDown or touchEnd occured outside the downshiftElements.
+ * @returns {Object} The mouse and touch events information, if any of are happening.
  */
-function useMouseAndTouchTracker(isOpen, downshiftElementRefs, environment, handleBlur) {
+function useMouseAndTouchTracker(environment, downshiftElementRefs, handleBlur) {
   var mouseAndTouchTrackersRef = React.useRef({
     isMouseDown: false,
     isTouchMove: false,
@@ -1742,11 +1740,11 @@ function useMouseAndTouchTracker(isOpen, downshiftElementRefs, environment, hand
   });
   React.useEffect(function () {
     {
-      return;
+      return noop;
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isOpen, environment]);
-  return mouseAndTouchTrackersRef;
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- refs don't change
+  }, [environment, handleBlur]);
+  return mouseAndTouchTrackersRef.current;
 }
 
 /* istanbul ignore next */
@@ -2339,8 +2337,13 @@ function useSelect(userProps) {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  // Add mouse/touch events to document.
-  var mouseAndTouchTrackersRef = useMouseAndTouchTracker(isOpen, [menuRef, toggleButtonRef], environment);
+  var mouseAndTouchTrackers = useMouseAndTouchTracker(environment, [toggleButtonRef, menuRef], React.useCallback(function handleBlur() {
+    if (latest.current.state.isOpen) {
+      dispatch({
+        type: ToggleButtonBlur
+      });
+    }
+  }, [dispatch, latest]));
   var setGetterPropCallInfo = useGetterPropsCalledChecker('getMenuProps', 'getToggleButtonProps');
   // Reset itemRefs on close.
   React.useEffect(function () {
@@ -2526,7 +2529,7 @@ function useSelect(userProps) {
       });
     };
     var toggleButtonHandleBlur = function toggleButtonHandleBlur() {
-      if (latestState.isOpen && !mouseAndTouchTrackersRef.current.isMouseDown) {
+      if (latestState.isOpen && !mouseAndTouchTrackers.isMouseDown) {
         dispatch({
           type: ToggleButtonBlur
         });
@@ -2543,7 +2546,7 @@ function useSelect(userProps) {
     }
     setGetterPropCallInfo('getToggleButtonProps', suppressRefError, refKey, toggleButtonRef);
     return toggleProps;
-  }, [latest, elementIds, setGetterPropCallInfo, dispatch, mouseAndTouchTrackersRef, toggleButtonKeyDownHandlers]);
+  }, [dispatch, elementIds, latest, mouseAndTouchTrackers, setGetterPropCallInfo, toggleButtonKeyDownHandlers]);
   var getItemProps = React.useCallback(function (_temp6) {
     var _extends4;
     var _ref6 = _temp6 === void 0 ? {} : _temp6,
@@ -2569,7 +2572,7 @@ function useSelect(userProps) {
       index = _getItemAndIndex[1];
     var disabled = latestProps.isItemDisabled(item, index);
     var itemHandleMouseMove = function itemHandleMouseMove() {
-      if (mouseAndTouchTrackersRef.current.isTouchEnd || index === latestState.highlightedIndex) {
+      if (mouseAndTouchTrackers.isTouchEnd || index === latestState.highlightedIndex) {
         return;
       }
       shouldScrollRef.current = false;
@@ -2603,7 +2606,7 @@ function useSelect(userProps) {
     itemProps.onMouseMove = callAllEventHandlers(onMouseMove, itemHandleMouseMove);
     itemProps.onMouseDown = callAllEventHandlers(onMouseDown, itemHandleMouseDown);
     return itemProps;
-  }, [latest, elementIds, mouseAndTouchTrackersRef, shouldScrollRef, dispatch]);
+  }, [latest, elementIds, mouseAndTouchTrackers, shouldScrollRef, dispatch]);
   return {
     // prop getters.
     getToggleButtonProps: getToggleButtonProps,
@@ -2964,8 +2967,14 @@ function useCombobox(userProps) {
       previousResultCountRef.current = items.length;
     }
   });
-  // Add mouse/touch events to document.
-  var mouseAndTouchTrackersRef = useMouseAndTouchTracker(isOpen, [inputRef, menuRef, toggleButtonRef], environment);
+  var mouseAndTouchTrackers = useMouseAndTouchTracker(environment, [toggleButtonRef, menuRef, inputRef], React.useCallback(function handleBlur() {
+    if (latest.current.state.isOpen) {
+      dispatch({
+        type: InputBlur,
+        selectItem: false
+      });
+    }
+  }, [dispatch, latest]));
   var setGetterPropCallInfo = useGetterPropsCalledChecker('getInputProps', 'getMenuProps');
   // Reset itemRefs on close.
   React.useEffect(function () {
@@ -3113,7 +3122,7 @@ function useCombobox(userProps) {
     var onSelectKey = /* istanbul ignore next (react-native) */'onPress' ;
     var customClickHandler = /* istanbul ignore next (react-native) */onPress ;
     var itemHandleMouseMove = function itemHandleMouseMove() {
-      if (mouseAndTouchTrackersRef.current.isTouchEnd || index === latestState.highlightedIndex) {
+      if (mouseAndTouchTrackers.isTouchEnd || index === latestState.highlightedIndex) {
         return;
       }
       shouldScrollRef.current = false;
@@ -3141,7 +3150,7 @@ function useCombobox(userProps) {
       onMouseMove: callAllEventHandlers(onMouseMove, itemHandleMouseMove),
       onMouseDown: callAllEventHandlers(onMouseDown, itemHandleMouseDown)
     }, rest);
-  }, [dispatch, elementIds, latest, mouseAndTouchTrackersRef, shouldScrollRef]);
+  }, [dispatch, elementIds, latest, mouseAndTouchTrackers, shouldScrollRef]);
   var getToggleButtonProps = React.useCallback(function (_temp4) {
     var _extends4;
     var _ref5 = _temp4 === void 0 ? {} : _temp4;
@@ -3195,7 +3204,7 @@ function useCombobox(userProps) {
     };
     var inputHandleBlur = function inputHandleBlur(event) {
       /* istanbul ignore else */
-      if (environment != null && environment.document && latestState.isOpen && !mouseAndTouchTrackersRef.current.isMouseDown) {
+      if (environment != null && environment.document && latestState.isOpen && !mouseAndTouchTrackers.isMouseDown) {
         var isBlurByTabChange = event.relatedTarget === null && environment.document.activeElement !== environment.document.body;
         dispatch({
           type: InputBlur,
@@ -3231,7 +3240,7 @@ function useCombobox(userProps) {
     return _extends__default["default"]((_extends5 = {}, _extends5[refKey] = handleRefs(ref, function (inputNode) {
       inputRef.current = inputNode;
     }), _extends5['aria-activedescendant'] = latestState.isOpen && latestState.highlightedIndex > -1 ? elementIds.getItemId(latestState.highlightedIndex) : '', _extends5['aria-autocomplete'] = 'list', _extends5['aria-controls'] = elementIds.menuId, _extends5['aria-expanded'] = latestState.isOpen, _extends5['aria-labelledby'] = rest && rest['aria-label'] ? undefined : elementIds.labelId, _extends5.autoComplete = 'off', _extends5.id = elementIds.inputId, _extends5.role = 'combobox', _extends5.value = latestState.inputValue, _extends5), eventHandlers, rest);
-  }, [setGetterPropCallInfo, latest, elementIds, inputKeyDownHandlers, dispatch, mouseAndTouchTrackersRef, environment]);
+  }, [dispatch, elementIds, environment, inputKeyDownHandlers, latest, mouseAndTouchTrackers, setGetterPropCallInfo]);
 
   // returns
   var toggleMenu = React.useCallback(function () {