downshift 8.3.1 → 8.3.2

package/dist/src/hooks/utils.d.ts

@@ -7,9 +7,8 @@ export function useScrollIntoView({ highlightedIndex, isOpen, itemRefs, getItemN
     menuElement: any;
     scrollIntoView: any;
 }): React.MutableRefObject<boolean>;
-export function useA11yMessageSetter(getA11yMessage: any, dependencyArray: any, { isInitialMount, highlightedIndex, items, environment, ...rest }: {
+export function useA11yMessageSetter(getA11yMessage: any, dependencyArray: any, { highlightedIndex, items, environment, ...rest }: {
     [x: string]: any;
-    isInitialMount: any;
     highlightedIndex: any;
     items: any;
     environment: any;
@@ -163,6 +162,10 @@ export namespace commonDropdownPropTypes {
     export { stateReducer_1 as stateReducer };
 }
 export namespace commonPropTypes { }
+/**
+ * Tracks if it's the first render.
+ */
+export function useIsInitialMount(): boolean;
 import { noop } from "../utils";
 import React from "react";
 declare function itemToString(item: any): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "downshift",
-  "version": "8.3.1",
+  "version": "8.3.2",
   "description": "🏎 A set of primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, combobox or select dropdown components.",
   "main": "dist/downshift.cjs.js",
   "react-native": "dist/downshift.native.cjs.js",

package/preact/dist/downshift.cjs.js

@@ -262,6 +262,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;
@@ -1506,7 +1509,7 @@ function validateGetRootPropsCalledCorrectly(element, _ref13) {
   }
 }
 
-var _excluded$3 = ["isInitialMount", "highlightedIndex", "items", "environment"];
+var _excluded$3 = ["highlightedIndex", "items", "environment"];
 var dropdownDefaultStateValues = {
   highlightedIndex: -1,
   isOpen: false,
@@ -1684,9 +1687,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]);
@@ -1791,7 +1795,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) {
@@ -1801,6 +1806,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) {
@@ -1812,12 +1818,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)) {
@@ -1896,11 +1904,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)) {
@@ -1945,11 +1953,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;
@@ -1998,6 +2006,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({
@@ -2338,7 +2360,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,
@@ -2353,7 +2375,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,
@@ -2361,7 +2382,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,
@@ -2401,12 +2421,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;
@@ -2426,13 +2445,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) {
@@ -2672,7 +2684,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;
@@ -2706,7 +2718,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,
@@ -2821,13 +2833,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)
@@ -3005,7 +3018,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.
@@ -3022,7 +3036,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,
@@ -3030,7 +3043,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,
@@ -3046,7 +3058,6 @@ function useCombobox(userProps) {
     getItemNodeFromIndex: getItemNodeFromIndex
   });
   useControlPropsValidator({
-    isInitialMount: isInitialMountRef.current,
     props: props,
     state: state
   });
@@ -3059,10 +3070,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 () {
@@ -3072,13 +3082,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) {
@@ -3225,7 +3228,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;
@@ -3253,7 +3256,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,
@@ -3685,7 +3688,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();
@@ -3698,7 +3701,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) {
@@ -3719,7 +3722,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) {
@@ -3727,20 +3730,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/preact/dist/downshift.esm.js

@@ -249,6 +249,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;
@@ -1493,7 +1496,7 @@ function validateGetRootPropsCalledCorrectly(element, _ref13) {
   }
 }
 
-var _excluded$3 = ["isInitialMount", "highlightedIndex", "items", "environment"];
+var _excluded$3 = ["highlightedIndex", "items", "environment"];
 var dropdownDefaultStateValues = {
   highlightedIndex: -1,
   isOpen: false,
@@ -1671,9 +1674,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]);
@@ -1778,7 +1782,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) {
@@ -1788,6 +1793,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) {
@@ -1799,12 +1805,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)) {
@@ -1883,11 +1891,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)) {
@@ -1932,11 +1940,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;
@@ -1985,6 +1993,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({
@@ -2325,7 +2347,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,
@@ -2340,7 +2362,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,
@@ -2348,7 +2369,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,
@@ -2388,12 +2408,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;
@@ -2413,13 +2432,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) {
@@ -2659,7 +2671,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;
@@ -2693,7 +2705,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,
@@ -2808,13 +2820,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)
@@ -2992,7 +3005,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.
@@ -3009,7 +3023,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,
@@ -3017,7 +3030,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,
@@ -3033,7 +3045,6 @@ function useCombobox(userProps) {
     getItemNodeFromIndex: getItemNodeFromIndex
   });
   useControlPropsValidator({
-    isInitialMount: isInitialMountRef.current,
     props: props,
     state: state
   });
@@ -3046,10 +3057,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 () {
@@ -3059,13 +3069,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) {
@@ -3212,7 +3215,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;
@@ -3240,7 +3243,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,
@@ -3672,7 +3675,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();
@@ -3685,7 +3688,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) {
@@ -3706,7 +3709,7 @@ function useMultipleSelection(userProps) {
   }, [selectedItems.length]);
   // Sets focus on active item.
   useEffect(function () {
-    if (isInitialMountRef.current) {
+    if (isInitialMount) {
       return;
     }
     if (activeIndex === -1 && dropdownRef.current) {
@@ -3714,20 +3717,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 () {