downshift 8.3.1 → 8.3.2

package/dist/downshift.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;
@@ -1545,7 +1548,7 @@ function validateGetRootPropsCalledCorrectly(element, _ref13) {
   }
 }
 
-var _excluded$3 = ["isInitialMount", "highlightedIndex", "items", "environment"];
+var _excluded$3 = ["highlightedIndex", "items", "environment"];
 var dropdownDefaultStateValues = {
   highlightedIndex: -1,
   isOpen: false,
@@ -1723,9 +1726,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]);
@@ -1830,7 +1834,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) {
@@ -1840,6 +1845,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) {
@@ -1851,12 +1857,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)) {
@@ -1935,11 +1943,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)) {
@@ -1984,11 +1992,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;
@@ -2037,6 +2045,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({
@@ -2377,7 +2399,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,
@@ -2392,7 +2414,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,
@@ -2400,7 +2421,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,
@@ -2440,12 +2460,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;
@@ -2465,13 +2484,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) {
@@ -2711,7 +2723,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;
@@ -2745,7 +2757,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,
@@ -2860,13 +2872,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)
@@ -3044,7 +3057,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.
@@ -3061,7 +3075,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,
@@ -3069,7 +3082,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,
@@ -3085,7 +3097,6 @@ function useCombobox(userProps) {
     getItemNodeFromIndex: getItemNodeFromIndex
   });
   useControlPropsValidator({
-    isInitialMount: isInitialMountRef.current,
     props: props,
     state: state
   });
@@ -3098,10 +3109,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 () {
@@ -3111,13 +3121,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) {
@@ -3264,7 +3267,7 @@ function useCombobox(userProps) {
     var onSelectKey = 'onClick';
     var customClickHandler = onClick;
     var itemHandleMouseMove = function itemHandleMouseMove() {
-      if (index === latestState.highlightedIndex) {
+      if (mouseAndTouchTrackersRef.current.isTouchEnd || index === latestState.highlightedIndex) {
         return;
       }
       shouldScrollRef.current = false;
@@ -3292,7 +3295,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,
@@ -3724,7 +3727,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();
@@ -3737,7 +3740,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) {
@@ -3758,7 +3761,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) {
@@ -3766,20 +3769,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.esm.js

@@ -242,6 +242,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;
@@ -1532,7 +1535,7 @@ function validateGetRootPropsCalledCorrectly(element, _ref13) {
   }
 }
 
-var _excluded$3 = ["isInitialMount", "highlightedIndex", "items", "environment"];
+var _excluded$3 = ["highlightedIndex", "items", "environment"];
 var dropdownDefaultStateValues = {
   highlightedIndex: -1,
   isOpen: false,
@@ -1710,9 +1713,10 @@ function useEnhancedReducer(reducer, props, createInitialState, isStateEqual) {
   }, [propsRef]);
   var action = actionRef.current;
   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]);
@@ -1817,7 +1821,8 @@ function getHighlightedIndexOnOpen(props, state, offset) {
 function useMouseAndTouchTracker(isOpen, downshiftElementRefs, environment, handleBlur) {
   var mouseAndTouchTrackersRef = useRef({
     isMouseDown: false,
-    isTouchMove: false
+    isTouchMove: false,
+    isTouchEnd: false
   });
   useEffect(function () {
     if (!environment) {
@@ -1827,6 +1832,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) {
@@ -1838,12 +1844,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)) {
@@ -1922,11 +1930,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(_ref3, _excluded$3);
+  var isInitialMount = useIsInitialMount();
   // Sets a11y status message on changes in state.
   useEffect(function () {
     if (isInitialMount || false || !(environment != null && environment.document)) {
@@ -1971,11 +1979,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 = useRef(props);
+    var isInitialMount = useIsInitialMount();
     useEffect(function () {
       if (isInitialMount) {
         return;
@@ -2024,6 +2032,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.useRef(true);
+  React.useEffect(function () {
+    isInitialMountRef.current = false;
+    return function () {
+      isInitialMountRef.current = true;
+    };
+  }, []);
+  return isInitialMountRef.current;
+}
+
 // Shared between all exports.
 var commonPropTypes = {
   environment: PropTypes.shape({
@@ -2364,7 +2386,7 @@ function useSelect(userProps) {
   var elementIds = useElementIds(props);
   // used to keep track of how many items we had on previous cycle.
   var previousResultCountRef = useRef();
-  var isInitialMountRef = useRef(true);
+  var isInitialMount = useIsInitialMount();
   // utility callback to get item element.
   var latest = useLatestRef({
     state: state,
@@ -2379,7 +2401,6 @@ function useSelect(userProps) {
   // Effects.
   // Sets a11y status message on changes in state.
   useA11yMessageSetter(getA11yStatusMessage, [isOpen, highlightedIndex, inputValue, items], _extends({
-    isInitialMount: isInitialMountRef.current,
     previousResultCount: previousResultCountRef.current,
     items: items,
     environment: environment,
@@ -2387,7 +2408,6 @@ function useSelect(userProps) {
   }, state));
   // Sets a11y status message on changes in selectedItem.
   useA11yMessageSetter(getA11ySelectionMessage, [selectedItem], _extends({
-    isInitialMount: isInitialMountRef.current,
     previousResultCount: previousResultCountRef.current,
     items: items,
     environment: environment,
@@ -2427,12 +2447,11 @@ function useSelect(userProps) {
     clearTimeoutRef.current(dispatch);
   }, [dispatch, inputValue]);
   useControlPropsValidator({
-    isInitialMount: isInitialMountRef.current,
     props: props,
     state: state
   });
   useEffect(function () {
-    if (isInitialMountRef.current) {
+    if (isInitialMount) {
       return;
     }
     previousResultCountRef.current = items.length;
@@ -2452,13 +2471,6 @@ function useSelect(userProps) {
     });
   });
   var setGetterPropCallInfo = useGetterPropsCalledChecker('getMenuProps', 'getToggleButtonProps');
-  // Make initial ref false.
-  useEffect(function () {
-    isInitialMountRef.current = false;
-    return function () {
-      isInitialMountRef.current = true;
-    };
-  }, []);
   // Reset itemRefs on close.
   useEffect(function () {
     if (!isOpen) {
@@ -2698,7 +2710,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;
@@ -2732,7 +2744,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,
@@ -2847,13 +2859,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();
   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)
@@ -3031,7 +3044,8 @@ function useCombobox(userProps) {
   var itemRefs = useRef({});
   var inputRef = useRef(null);
   var toggleButtonRef = useRef(null);
-  var isInitialMountRef = 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.
@@ -3048,7 +3062,6 @@ function useCombobox(userProps) {
   // Effects.
   // Sets a11y status message on changes in state.
   useA11yMessageSetter(getA11yStatusMessage, [isOpen, highlightedIndex, inputValue, items], _extends({
-    isInitialMount: isInitialMountRef.current,
     previousResultCount: previousResultCountRef.current,
     items: items,
     environment: environment,
@@ -3056,7 +3069,6 @@ function useCombobox(userProps) {
   }, state));
   // Sets a11y status message on changes in selectedItem.
   useA11yMessageSetter(getA11ySelectionMessage, [selectedItem], _extends({
-    isInitialMount: isInitialMountRef.current,
     previousResultCount: previousResultCountRef.current,
     items: items,
     environment: environment,
@@ -3072,7 +3084,6 @@ function useCombobox(userProps) {
     getItemNodeFromIndex: getItemNodeFromIndex
   });
   useControlPropsValidator({
-    isInitialMount: isInitialMountRef.current,
     props: props,
     state: state
   });
@@ -3085,10 +3096,9 @@ function useCombobox(userProps) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   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 () {
@@ -3098,13 +3108,6 @@ function useCombobox(userProps) {
     });
   });
   var setGetterPropCallInfo = useGetterPropsCalledChecker('getInputProps', 'getMenuProps');
-  // Make initial ref false.
-  useEffect(function () {
-    isInitialMountRef.current = false;
-    return function () {
-      isInitialMountRef.current = true;
-    };
-  }, []);
   // Reset itemRefs on close.
   useEffect(function () {
     if (!isOpen) {
@@ -3251,7 +3254,7 @@ function useCombobox(userProps) {
     var onSelectKey = 'onClick';
     var customClickHandler = onClick;
     var itemHandleMouseMove = function itemHandleMouseMove() {
-      if (index === latestState.highlightedIndex) {
+      if (mouseAndTouchTrackersRef.current.isTouchEnd || index === latestState.highlightedIndex) {
         return;
       }
       shouldScrollRef.current = false;
@@ -3279,7 +3282,7 @@ function useCombobox(userProps) {
       onMouseMove: callAllEventHandlers(onMouseMove, itemHandleMouseMove),
       onMouseDown: callAllEventHandlers(onMouseDown, itemHandleMouseDown)
     }, rest);
-  }, [dispatch, latest, shouldScrollRef, elementIds]);
+  }, [dispatch, elementIds, latest, mouseAndTouchTrackersRef, shouldScrollRef]);
   var getToggleButtonProps = useCallback(function (_temp4) {
     var _extends4;
     var _ref5 = _temp4 === void 0 ? {} : _temp4,
@@ -3711,7 +3714,7 @@ function useMultipleSelection(userProps) {
     selectedItems = state.selectedItems;
 
   // Refs.
-  var isInitialMountRef = useRef(true);
+  var isInitialMount = useIsInitialMount();
   var dropdownRef = useRef(null);
   var previousSelectedItemsRef = useRef(selectedItems);
   var selectedItemRefs = useRef();
@@ -3724,7 +3727,7 @@ function useMultipleSelection(userProps) {
   // Effects.
   /* Sets a11y status message on changes in selectedItem. */
   useEffect(function () {
-    if (isInitialMountRef.current || false || !(environment != null && environment.document)) {
+    if (isInitialMount || false || !(environment != null && environment.document)) {
       return;
     }
     if (selectedItems.length < previousSelectedItemsRef.current.length) {
@@ -3745,7 +3748,7 @@ function useMultipleSelection(userProps) {
   }, [selectedItems.length]);
   // Sets focus on active item.
   useEffect(function () {
-    if (isInitialMountRef.current) {
+    if (isInitialMount) {
       return;
     }
     if (activeIndex === -1 && dropdownRef.current) {
@@ -3753,20 +3756,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.
-  useEffect(function () {
-    isInitialMountRef.current = false;
-    return function () {
-      isInitialMountRef.current = true;
-    };
-  }, []);
 
   // Event handler functions.
   var selectedItemKeyDownHandlers = useMemo(function () {