downshift 8.3.1 → 8.3.2

package/dist/downshift.native.cjs.js

@@ -244,6 +244,9 @@ function pickState(state) {
  * @returns {Object} The merged controlled state.
  */
 function getState(state, props) {
+  if (!state || !props) {
+    return state;
+  }
   return Object.keys(state).reduce(function (prevState, key) {
     prevState[key] = isControlledProp(props, key) ? props[key] : state[key];
     return prevState;
@@ -1444,7 +1447,7 @@ function validateGetRootPropsCalledCorrectly(element, _ref13) {
   }
 }
 
-var _excluded$3 = ["isInitialMount", "highlightedIndex", "items", "environment"];
+var _excluded$3 = ["highlightedIndex", "items", "environment"];
 var dropdownDefaultStateValues = {
   highlightedIndex: -1,
   isOpen: false,
@@ -1619,9 +1622,10 @@ function useEnhancedReducer(reducer, props, createInitialState, isStateEqual) {
   }, [propsRef]);
   var action = actionRef.current;
   React.useEffect(function () {
-    var shouldCallOnChangeProps = action && prevStateRef.current && !isStateEqual(prevStateRef.current, state);
+    var prevState = getState(prevStateRef.current, action == null ? void 0 : action.props);
+    var shouldCallOnChangeProps = action && prevStateRef.current && !isStateEqual(prevState, state);
     if (shouldCallOnChangeProps) {
-      callOnChangeProps(action, getState(prevStateRef.current, action.props), state);
+      callOnChangeProps(action, prevState, state);
     }
     prevStateRef.current = state;
   }, [state, action, isStateEqual]);
@@ -1726,7 +1730,8 @@ function getHighlightedIndexOnOpen(props, state, offset) {
 function useMouseAndTouchTracker(isOpen, downshiftElementRefs, environment, handleBlur) {
   var mouseAndTouchTrackersRef = React.useRef({
     isMouseDown: false,
-    isTouchMove: false
+    isTouchMove: false,
+    isTouchEnd: false
   });
   React.useEffect(function () {
     {
@@ -1790,11 +1795,11 @@ if (process.env.NODE_ENV !== 'production') {
   };
 }
 function useA11yMessageSetter(getA11yMessage, dependencyArray, _ref3) {
-  var isInitialMount = _ref3.isInitialMount,
-    highlightedIndex = _ref3.highlightedIndex,
+  var highlightedIndex = _ref3.highlightedIndex,
     items = _ref3.items,
     environment = _ref3.environment,
     rest = _objectWithoutPropertiesLoose__default["default"](_ref3, _excluded$3);
+  var isInitialMount = useIsInitialMount();
   // Sets a11y status message on changes in state.
   React.useEffect(function () {
     if (isInitialMount || true || !(environment != null && environment.document)) {
@@ -1839,11 +1844,11 @@ var useControlPropsValidator = noop;
 /* istanbul ignore next */
 if (process.env.NODE_ENV !== 'production') {
   useControlPropsValidator = function useControlPropsValidator(_ref5) {
-    var isInitialMount = _ref5.isInitialMount,
-      props = _ref5.props,
+    var props = _ref5.props,
       state = _ref5.state;
     // used for checking when props are moving from controlled to uncontrolled.
     var prevPropsRef = React.useRef(props);
+    var isInitialMount = useIsInitialMount();
     React.useEffect(function () {
       if (isInitialMount) {
         return;
@@ -1892,6 +1897,20 @@ function isDropdownsStateEqual(prevState, newState) {
   return prevState.isOpen === newState.isOpen && prevState.inputValue === newState.inputValue && prevState.highlightedIndex === newState.highlightedIndex && prevState.selectedItem === newState.selectedItem;
 }
 
+/**
+ * Tracks if it's the first render.
+ */
+function useIsInitialMount() {
+  var isInitialMountRef = React__default["default"].useRef(true);
+  React__default["default"].useEffect(function () {
+    isInitialMountRef.current = false;
+    return function () {
+      isInitialMountRef.current = true;
+    };
+  }, []);
+  return isInitialMountRef.current;
+}
+
 // Shared between all exports.
 var commonPropTypes = {
   environment: PropTypes__default["default"].shape({
@@ -2232,7 +2251,7 @@ function useSelect(userProps) {
   var elementIds = useElementIds(props);
   // used to keep track of how many items we had on previous cycle.
   var previousResultCountRef = React.useRef();
-  var isInitialMountRef = React.useRef(true);
+  var isInitialMount = useIsInitialMount();
   // utility callback to get item element.
   var latest = useLatestRef({
     state: state,
@@ -2247,7 +2266,6 @@ function useSelect(userProps) {
   // Effects.
   // Sets a11y status message on changes in state.
   useA11yMessageSetter(getA11yStatusMessage, [isOpen, highlightedIndex, inputValue, items], _extends__default["default"]({
-    isInitialMount: isInitialMountRef.current,
     previousResultCount: previousResultCountRef.current,
     items: items,
     environment: environment,
@@ -2255,7 +2273,6 @@ function useSelect(userProps) {
   }, state));
   // Sets a11y status message on changes in selectedItem.
   useA11yMessageSetter(getA11ySelectionMessage, [selectedItem], _extends__default["default"]({
-    isInitialMount: isInitialMountRef.current,
     previousResultCount: previousResultCountRef.current,
     items: items,
     environment: environment,
@@ -2295,12 +2312,11 @@ function useSelect(userProps) {
     clearTimeoutRef.current(dispatch);
   }, [dispatch, inputValue]);
   useControlPropsValidator({
-    isInitialMount: isInitialMountRef.current,
     props: props,
     state: state
   });
   React.useEffect(function () {
-    if (isInitialMountRef.current) {
+    if (isInitialMount) {
       return;
     }
     previousResultCountRef.current = items.length;
@@ -2316,13 +2332,6 @@ function useSelect(userProps) {
   // Add mouse/touch events to document.
   var mouseAndTouchTrackersRef = useMouseAndTouchTracker(isOpen, [menuRef, toggleButtonRef], environment);
   var setGetterPropCallInfo = useGetterPropsCalledChecker('getMenuProps', 'getToggleButtonProps');
-  // Make initial ref false.
-  React.useEffect(function () {
-    isInitialMountRef.current = false;
-    return function () {
-      isInitialMountRef.current = true;
-    };
-  }, []);
   // Reset itemRefs on close.
   React.useEffect(function () {
     if (!isOpen) {
@@ -2550,7 +2559,7 @@ function useSelect(userProps) {
       index = _getItemAndIndex[1];
     var disabled = latestProps.isItemDisabled(item, index);
     var itemHandleMouseMove = function itemHandleMouseMove() {
-      if (index === latestState.highlightedIndex) {
+      if (mouseAndTouchTrackersRef.current.isTouchEnd || index === latestState.highlightedIndex) {
         return;
       }
       shouldScrollRef.current = false;
@@ -2584,7 +2593,7 @@ function useSelect(userProps) {
     itemProps.onMouseMove = callAllEventHandlers(onMouseMove, itemHandleMouseMove);
     itemProps.onMouseDown = callAllEventHandlers(onMouseDown, itemHandleMouseDown);
     return itemProps;
-  }, [latest, elementIds, shouldScrollRef, dispatch]);
+  }, [latest, elementIds, mouseAndTouchTrackersRef, shouldScrollRef, dispatch]);
   return {
     // prop getters.
     getToggleButtonProps: getToggleButtonProps,
@@ -2699,13 +2708,14 @@ function useControlledReducer(reducer, props, createInitialState, isStateEqual)
   var _useEnhancedReducer = useEnhancedReducer(reducer, props, createInitialState, isStateEqual),
     state = _useEnhancedReducer[0],
     dispatch = _useEnhancedReducer[1];
-
-  // ToDo: if needed, make same approach as selectedItemChanged from Downshift.
+  var isInitialMount = useIsInitialMount();
   React.useEffect(function () {
     if (!isControlledProp(props, 'selectedItem')) {
       return;
     }
-    if (props.selectedItemChanged(previousSelectedItemRef.current, props.selectedItem)) {
+    if (!isInitialMount &&
+    // on first mount we already have the proper inputValue for a initial selected item.
+    props.selectedItemChanged(previousSelectedItemRef.current, props.selectedItem)) {
       dispatch({
         type: ControlledPropUpdatedSelectedItem,
         inputValue: props.itemToString(props.selectedItem)
@@ -2883,7 +2893,8 @@ function useCombobox(userProps) {
   var itemRefs = React.useRef({});
   var inputRef = React.useRef(null);
   var toggleButtonRef = React.useRef(null);
-  var isInitialMountRef = React.useRef(true);
+  var isInitialMount = useIsInitialMount();
+
   // prevent id re-generation between renders.
   var elementIds = useElementIds(props);
   // used to keep track of how many items we had on previous cycle.
@@ -2900,7 +2911,6 @@ function useCombobox(userProps) {
   // Effects.
   // Sets a11y status message on changes in state.
   useA11yMessageSetter(getA11yStatusMessage, [isOpen, highlightedIndex, inputValue, items], _extends__default["default"]({
-    isInitialMount: isInitialMountRef.current,
     previousResultCount: previousResultCountRef.current,
     items: items,
     environment: environment,
@@ -2908,7 +2918,6 @@ function useCombobox(userProps) {
   }, state));
   // Sets a11y status message on changes in selectedItem.
   useA11yMessageSetter(getA11ySelectionMessage, [selectedItem], _extends__default["default"]({
-    isInitialMount: isInitialMountRef.current,
     previousResultCount: previousResultCountRef.current,
     items: items,
     environment: environment,
@@ -2924,7 +2933,6 @@ function useCombobox(userProps) {
     getItemNodeFromIndex: getItemNodeFromIndex
   });
   useControlPropsValidator({
-    isInitialMount: isInitialMountRef.current,
     props: props,
     state: state
   });
@@ -2937,21 +2945,13 @@ function useCombobox(userProps) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   React.useEffect(function () {
-    if (isInitialMountRef.current) {
-      return;
+    if (!isInitialMount) {
+      previousResultCountRef.current = items.length;
     }
-    previousResultCountRef.current = items.length;
   });
   // Add mouse/touch events to document.
   var mouseAndTouchTrackersRef = useMouseAndTouchTracker(isOpen, [inputRef, menuRef, toggleButtonRef], environment);
   var setGetterPropCallInfo = useGetterPropsCalledChecker('getInputProps', 'getMenuProps');
-  // Make initial ref false.
-  React.useEffect(function () {
-    isInitialMountRef.current = false;
-    return function () {
-      isInitialMountRef.current = true;
-    };
-  }, []);
   // Reset itemRefs on close.
   React.useEffect(function () {
     if (!isOpen) {
@@ -3098,7 +3098,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 (index === latestState.highlightedIndex) {
+      if (mouseAndTouchTrackersRef.current.isTouchEnd || index === latestState.highlightedIndex) {
         return;
       }
       shouldScrollRef.current = false;
@@ -3126,7 +3126,7 @@ function useCombobox(userProps) {
       onMouseMove: callAllEventHandlers(onMouseMove, itemHandleMouseMove),
       onMouseDown: callAllEventHandlers(onMouseDown, itemHandleMouseDown)
     }, rest);
-  }, [dispatch, latest, shouldScrollRef, elementIds]);
+  }, [dispatch, elementIds, latest, mouseAndTouchTrackersRef, shouldScrollRef]);
   var getToggleButtonProps = React.useCallback(function (_temp4) {
     var _extends4;
     var _ref5 = _temp4 === void 0 ? {} : _temp4;
@@ -3570,7 +3570,7 @@ function useMultipleSelection(userProps) {
     selectedItems = state.selectedItems;
 
   // Refs.
-  var isInitialMountRef = React.useRef(true);
+  var isInitialMount = useIsInitialMount();
   var dropdownRef = React.useRef(null);
   var previousSelectedItemsRef = React.useRef(selectedItems);
   var selectedItemRefs = React.useRef();
@@ -3583,7 +3583,7 @@ function useMultipleSelection(userProps) {
   // Effects.
   /* Sets a11y status message on changes in selectedItem. */
   React.useEffect(function () {
-    if (isInitialMountRef.current || true || !(environment != null && environment.document)) {
+    if (isInitialMount || true || !(environment != null && environment.document)) {
       return;
     }
     if (selectedItems.length < previousSelectedItemsRef.current.length) {
@@ -3604,7 +3604,7 @@ function useMultipleSelection(userProps) {
   }, [selectedItems.length]);
   // Sets focus on active item.
   React.useEffect(function () {
-    if (isInitialMountRef.current) {
+    if (isInitialMount) {
       return;
     }
     if (activeIndex === -1 && dropdownRef.current) {
@@ -3612,20 +3612,12 @@ function useMultipleSelection(userProps) {
     } else if (selectedItemRefs.current[activeIndex]) {
       selectedItemRefs.current[activeIndex].focus();
     }
-  }, [activeIndex]);
+  }, [activeIndex, isInitialMount]);
   useControlPropsValidator({
-    isInitialMount: isInitialMountRef.current,
     props: props,
     state: state
   });
   var setGetterPropCallInfo = useGetterPropsCalledChecker('getDropdownProps');
-  // Make initial ref false.
-  React.useEffect(function () {
-    isInitialMountRef.current = false;
-    return function () {
-      isInitialMountRef.current = true;
-    };
-  }, []);
 
   // Event handler functions.
   var selectedItemKeyDownHandlers = React.useMemo(function () {

package/dist/downshift.nativeweb.cjs.js

@@ -255,6 +255,9 @@ function pickState(state) {
  * @returns {Object} The merged controlled state.
  */
 function getState(state, props) {
+  if (!state || !props) {
+    return state;
+  }
   return Object.keys(state).reduce(function (prevState, key) {
     prevState[key] = isControlledProp(props, key) ? props[key] : state[key];
     return prevState;
@@ -1543,7 +1546,7 @@ function validateGetRootPropsCalledCorrectly(element, _ref13) {
   }
 }
 
-var _excluded$3 = ["isInitialMount", "highlightedIndex", "items", "environment"];
+var _excluded$3 = ["highlightedIndex", "items", "environment"];
 var dropdownDefaultStateValues = {
   highlightedIndex: -1,
   isOpen: false,
@@ -1718,9 +1721,10 @@ function useEnhancedReducer(reducer, props, createInitialState, isStateEqual) {
   }, [propsRef]);
   var action = actionRef.current;
   React.useEffect(function () {
-    var shouldCallOnChangeProps = action && prevStateRef.current && !isStateEqual(prevStateRef.current, state);
+    var prevState = getState(prevStateRef.current, action == null ? void 0 : action.props);
+    var shouldCallOnChangeProps = action && prevStateRef.current && !isStateEqual(prevState, state);
     if (shouldCallOnChangeProps) {
-      callOnChangeProps(action, getState(prevStateRef.current, action.props), state);
+      callOnChangeProps(action, prevState, state);
     }
     prevStateRef.current = state;
   }, [state, action, isStateEqual]);
@@ -1825,7 +1829,8 @@ function getHighlightedIndexOnOpen(props, state, offset) {
 function useMouseAndTouchTracker(isOpen, downshiftElementRefs, environment, handleBlur) {
   var mouseAndTouchTrackersRef = React.useRef({
     isMouseDown: false,
-    isTouchMove: false
+    isTouchMove: false,
+    isTouchEnd: false
   });
   React.useEffect(function () {
     if (!environment) {
@@ -1835,6 +1840,7 @@ function useMouseAndTouchTracker(isOpen, downshiftElementRefs, environment, hand
     // The same strategy for checking if a click occurred inside or outside downshift
     // as in downshift.js.
     var onMouseDown = function onMouseDown() {
+      mouseAndTouchTrackersRef.current.isTouchEnd = false; // reset this one.
       mouseAndTouchTrackersRef.current.isMouseDown = true;
     };
     var onMouseUp = function onMouseUp(event) {
@@ -1846,12 +1852,14 @@ function useMouseAndTouchTracker(isOpen, downshiftElementRefs, environment, hand
       }
     };
     var onTouchStart = function onTouchStart() {
+      mouseAndTouchTrackersRef.current.isTouchEnd = false;
       mouseAndTouchTrackersRef.current.isTouchMove = false;
     };
     var onTouchMove = function onTouchMove() {
       mouseAndTouchTrackersRef.current.isTouchMove = true;
     };
     var onTouchEnd = function onTouchEnd(event) {
+      mouseAndTouchTrackersRef.current.isTouchEnd = true;
       if (isOpen && !mouseAndTouchTrackersRef.current.isTouchMove && !targetWithinDownshift(event.target, downshiftElementRefs.map(function (ref) {
         return ref.current;
       }), environment, false)) {
@@ -1930,11 +1938,11 @@ if (process.env.NODE_ENV !== 'production') {
   };
 }
 function useA11yMessageSetter(getA11yMessage, dependencyArray, _ref3) {
-  var isInitialMount = _ref3.isInitialMount,
-    highlightedIndex = _ref3.highlightedIndex,
+  var highlightedIndex = _ref3.highlightedIndex,
     items = _ref3.items,
     environment = _ref3.environment,
     rest = _objectWithoutPropertiesLoose__default["default"](_ref3, _excluded$3);
+  var isInitialMount = useIsInitialMount();
   // Sets a11y status message on changes in state.
   React.useEffect(function () {
     if (isInitialMount || false || !(environment != null && environment.document)) {
@@ -1979,11 +1987,11 @@ var useControlPropsValidator = noop;
 /* istanbul ignore next */
 if (process.env.NODE_ENV !== 'production') {
   useControlPropsValidator = function useControlPropsValidator(_ref5) {
-    var isInitialMount = _ref5.isInitialMount,
-      props = _ref5.props,
+    var props = _ref5.props,
       state = _ref5.state;
     // used for checking when props are moving from controlled to uncontrolled.
     var prevPropsRef = React.useRef(props);
+    var isInitialMount = useIsInitialMount();
     React.useEffect(function () {
       if (isInitialMount) {
         return;
@@ -2032,6 +2040,20 @@ function isDropdownsStateEqual(prevState, newState) {
   return prevState.isOpen === newState.isOpen && prevState.inputValue === newState.inputValue && prevState.highlightedIndex === newState.highlightedIndex && prevState.selectedItem === newState.selectedItem;
 }
 
+/**
+ * Tracks if it's the first render.
+ */
+function useIsInitialMount() {
+  var isInitialMountRef = React__default["default"].useRef(true);
+  React__default["default"].useEffect(function () {
+    isInitialMountRef.current = false;
+    return function () {
+      isInitialMountRef.current = true;
+    };
+  }, []);
+  return isInitialMountRef.current;
+}
+
 // Shared between all exports.
 var commonPropTypes = {
   environment: PropTypes__default["default"].shape({
@@ -2372,7 +2394,7 @@ function useSelect(userProps) {
   var elementIds = useElementIds(props);
   // used to keep track of how many items we had on previous cycle.
   var previousResultCountRef = React.useRef();
-  var isInitialMountRef = React.useRef(true);
+  var isInitialMount = useIsInitialMount();
   // utility callback to get item element.
   var latest = useLatestRef({
     state: state,
@@ -2387,7 +2409,6 @@ function useSelect(userProps) {
   // Effects.
   // Sets a11y status message on changes in state.
   useA11yMessageSetter(getA11yStatusMessage, [isOpen, highlightedIndex, inputValue, items], _extends__default["default"]({
-    isInitialMount: isInitialMountRef.current,
     previousResultCount: previousResultCountRef.current,
     items: items,
     environment: environment,
@@ -2395,7 +2416,6 @@ function useSelect(userProps) {
   }, state));
   // Sets a11y status message on changes in selectedItem.
   useA11yMessageSetter(getA11ySelectionMessage, [selectedItem], _extends__default["default"]({
-    isInitialMount: isInitialMountRef.current,
     previousResultCount: previousResultCountRef.current,
     items: items,
     environment: environment,
@@ -2435,12 +2455,11 @@ function useSelect(userProps) {
     clearTimeoutRef.current(dispatch);
   }, [dispatch, inputValue]);
   useControlPropsValidator({
-    isInitialMount: isInitialMountRef.current,
     props: props,
     state: state
   });
   React.useEffect(function () {
-    if (isInitialMountRef.current) {
+    if (isInitialMount) {
       return;
     }
     previousResultCountRef.current = items.length;
@@ -2460,13 +2479,6 @@ function useSelect(userProps) {
     });
   });
   var setGetterPropCallInfo = useGetterPropsCalledChecker('getMenuProps', 'getToggleButtonProps');
-  // Make initial ref false.
-  React.useEffect(function () {
-    isInitialMountRef.current = false;
-    return function () {
-      isInitialMountRef.current = true;
-    };
-  }, []);
   // Reset itemRefs on close.
   React.useEffect(function () {
     if (!isOpen) {
@@ -2694,7 +2706,7 @@ function useSelect(userProps) {
       index = _getItemAndIndex[1];
     var disabled = latestProps.isItemDisabled(item, index);
     var itemHandleMouseMove = function itemHandleMouseMove() {
-      if (index === latestState.highlightedIndex) {
+      if (mouseAndTouchTrackersRef.current.isTouchEnd || index === latestState.highlightedIndex) {
         return;
       }
       shouldScrollRef.current = false;
@@ -2728,7 +2740,7 @@ function useSelect(userProps) {
     itemProps.onMouseMove = callAllEventHandlers(onMouseMove, itemHandleMouseMove);
     itemProps.onMouseDown = callAllEventHandlers(onMouseDown, itemHandleMouseDown);
     return itemProps;
-  }, [latest, elementIds, shouldScrollRef, dispatch]);
+  }, [latest, elementIds, mouseAndTouchTrackersRef, shouldScrollRef, dispatch]);
   return {
     // prop getters.
     getToggleButtonProps: getToggleButtonProps,
@@ -2843,13 +2855,14 @@ function useControlledReducer(reducer, props, createInitialState, isStateEqual)
   var _useEnhancedReducer = useEnhancedReducer(reducer, props, createInitialState, isStateEqual),
     state = _useEnhancedReducer[0],
     dispatch = _useEnhancedReducer[1];
-
-  // ToDo: if needed, make same approach as selectedItemChanged from Downshift.
+  var isInitialMount = useIsInitialMount();
   React.useEffect(function () {
     if (!isControlledProp(props, 'selectedItem')) {
       return;
     }
-    if (props.selectedItemChanged(previousSelectedItemRef.current, props.selectedItem)) {
+    if (!isInitialMount &&
+    // on first mount we already have the proper inputValue for a initial selected item.
+    props.selectedItemChanged(previousSelectedItemRef.current, props.selectedItem)) {
       dispatch({
         type: ControlledPropUpdatedSelectedItem,
         inputValue: props.itemToString(props.selectedItem)
@@ -3027,7 +3040,8 @@ function useCombobox(userProps) {
   var itemRefs = React.useRef({});
   var inputRef = React.useRef(null);
   var toggleButtonRef = React.useRef(null);
-  var isInitialMountRef = React.useRef(true);
+  var isInitialMount = useIsInitialMount();
+
   // prevent id re-generation between renders.
   var elementIds = useElementIds(props);
   // used to keep track of how many items we had on previous cycle.
@@ -3044,7 +3058,6 @@ function useCombobox(userProps) {
   // Effects.
   // Sets a11y status message on changes in state.
   useA11yMessageSetter(getA11yStatusMessage, [isOpen, highlightedIndex, inputValue, items], _extends__default["default"]({
-    isInitialMount: isInitialMountRef.current,
     previousResultCount: previousResultCountRef.current,
     items: items,
     environment: environment,
@@ -3052,7 +3065,6 @@ function useCombobox(userProps) {
   }, state));
   // Sets a11y status message on changes in selectedItem.
   useA11yMessageSetter(getA11ySelectionMessage, [selectedItem], _extends__default["default"]({
-    isInitialMount: isInitialMountRef.current,
     previousResultCount: previousResultCountRef.current,
     items: items,
     environment: environment,
@@ -3068,7 +3080,6 @@ function useCombobox(userProps) {
     getItemNodeFromIndex: getItemNodeFromIndex
   });
   useControlPropsValidator({
-    isInitialMount: isInitialMountRef.current,
     props: props,
     state: state
   });
@@ -3081,10 +3092,9 @@ function useCombobox(userProps) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   React.useEffect(function () {
-    if (isInitialMountRef.current) {
-      return;
+    if (!isInitialMount) {
+      previousResultCountRef.current = items.length;
     }
-    previousResultCountRef.current = items.length;
   });
   // Add mouse/touch events to document.
   var mouseAndTouchTrackersRef = useMouseAndTouchTracker(isOpen, [inputRef, menuRef, toggleButtonRef], environment, function () {
@@ -3094,13 +3104,6 @@ function useCombobox(userProps) {
     });
   });
   var setGetterPropCallInfo = useGetterPropsCalledChecker('getInputProps', 'getMenuProps');
-  // Make initial ref false.
-  React.useEffect(function () {
-    isInitialMountRef.current = false;
-    return function () {
-      isInitialMountRef.current = true;
-    };
-  }, []);
   // Reset itemRefs on close.
   React.useEffect(function () {
     if (!isOpen) {
@@ -3247,7 +3250,7 @@ function useCombobox(userProps) {
     var onSelectKey = /* istanbul ignore next (react-native) */'onPress' ;
     var customClickHandler = onClick;
     var itemHandleMouseMove = function itemHandleMouseMove() {
-      if (index === latestState.highlightedIndex) {
+      if (mouseAndTouchTrackersRef.current.isTouchEnd || index === latestState.highlightedIndex) {
         return;
       }
       shouldScrollRef.current = false;
@@ -3275,7 +3278,7 @@ function useCombobox(userProps) {
       onMouseMove: callAllEventHandlers(onMouseMove, itemHandleMouseMove),
       onMouseDown: callAllEventHandlers(onMouseDown, itemHandleMouseDown)
     }, rest);
-  }, [dispatch, latest, shouldScrollRef, elementIds]);
+  }, [dispatch, elementIds, latest, mouseAndTouchTrackersRef, shouldScrollRef]);
   var getToggleButtonProps = React.useCallback(function (_temp4) {
     var _extends4;
     var _ref5 = _temp4 === void 0 ? {} : _temp4;
@@ -3707,7 +3710,7 @@ function useMultipleSelection(userProps) {
     selectedItems = state.selectedItems;
 
   // Refs.
-  var isInitialMountRef = React.useRef(true);
+  var isInitialMount = useIsInitialMount();
   var dropdownRef = React.useRef(null);
   var previousSelectedItemsRef = React.useRef(selectedItems);
   var selectedItemRefs = React.useRef();
@@ -3720,7 +3723,7 @@ function useMultipleSelection(userProps) {
   // Effects.
   /* Sets a11y status message on changes in selectedItem. */
   React.useEffect(function () {
-    if (isInitialMountRef.current || false || !(environment != null && environment.document)) {
+    if (isInitialMount || false || !(environment != null && environment.document)) {
       return;
     }
     if (selectedItems.length < previousSelectedItemsRef.current.length) {
@@ -3741,7 +3744,7 @@ function useMultipleSelection(userProps) {
   }, [selectedItems.length]);
   // Sets focus on active item.
   React.useEffect(function () {
-    if (isInitialMountRef.current) {
+    if (isInitialMount) {
       return;
     }
     if (activeIndex === -1 && dropdownRef.current) {
@@ -3749,20 +3752,12 @@ function useMultipleSelection(userProps) {
     } else if (selectedItemRefs.current[activeIndex]) {
       selectedItemRefs.current[activeIndex].focus();
     }
-  }, [activeIndex]);
+  }, [activeIndex, isInitialMount]);
   useControlPropsValidator({
-    isInitialMount: isInitialMountRef.current,
     props: props,
     state: state
   });
   var setGetterPropCallInfo = useGetterPropsCalledChecker('getDropdownProps');
-  // Make initial ref false.
-  React.useEffect(function () {
-    isInitialMountRef.current = false;
-    return function () {
-      isInitialMountRef.current = true;
-    };
-  }, []);
 
   // Event handler functions.
   var selectedItemKeyDownHandlers = React.useMemo(function () {