downshift 8.2.3 → 8.2.4-alpha.0

package/README.md

@@ -1460,7 +1460,7 @@ MIT
 [npm]: https://www.npmjs.com/
 [node]: https://nodejs.org
 [build-badge]:
-  https://img.shields.io/github/workflow/status/downshift-js/downshift/validate?logo=github&style=flat-square
+  https://img.shields.io/github/actions/workflow/status/downshift-js/downshift/validate.yml?branch=master&logo=github&style=flat-square
 [build]:
   https://github.com/downshift-js/downshift/actions?query=workflow%3Avalidate+branch%3Amaster
 [coverage-badge]:

package/dist/downshift.cjs.js

@@ -1697,9 +1697,10 @@ function useLatestRef(val) {
  * @param {Function} reducer Reducer function from downshift.
  * @param {Object} props The hook props, also passed to createInitialState.
  * @param {Function} createInitialState Function that returns the initial state.
+ * @param {Function} isStateEqual Function that checks if a previous state is equal to the next.
  * @returns {Array} An array with the state and an action dispatcher.
  */
-function useEnhancedReducer(reducer, props, createInitialState) {
+function useEnhancedReducer(reducer, props, createInitialState, isStateEqual) {
   var prevStateRef = React.useRef();
   var actionRef = React.useRef();
   var enhancedReducer = React.useCallback(function (state, action) {
@@ -1722,11 +1723,19 @@ function useEnhancedReducer(reducer, props, createInitialState) {
   }, [propsRef]);
   var action = actionRef.current;
   React.useEffect(function () {
-    if (action && prevStateRef.current && prevStateRef.current !== state) {
+    console.log('effect');
+    var shouldCallOnChangeProps = action && prevStateRef.current && !isStateEqual(prevStateRef.current, state);
+    console.log('passed', prevStateRef.current, state);
+    if (shouldCallOnChangeProps) {
       callOnChangeProps(action, getState(prevStateRef.current, action.props), state);
     }
     prevStateRef.current = state;
-  }, [state, props, action]);
+  }, [state, action, isStateEqual]);
+  React.useEffect(function () {
+    if (props) {
+      prevStateRef.current = getState(prevStateRef.current, props);
+    }
+  }, [props]);
   return [state, dispatchWithProps];
 }
 
@@ -1737,10 +1746,11 @@ function useEnhancedReducer(reducer, props, createInitialState) {
  * @param {Function} reducer Reducer function from downshift.
  * @param {Object} props The hook props, also passed to createInitialState.
  * @param {Function} createInitialState Function that returns the initial state.
+ * @param {Function} isStateEqual Function that checks if a previous state is equal to the next.
  * @returns {Array} An array with the state and an action dispatcher.
  */
-function useControlledReducer$1(reducer, props, createInitialState) {
-  var _useEnhancedReducer = useEnhancedReducer(reducer, props, createInitialState),
+function useControlledReducer$1(reducer, props, createInitialState, isStateEqual) {
+  var _useEnhancedReducer = useEnhancedReducer(reducer, props, createInitialState, isStateEqual),
     state = _useEnhancedReducer[0],
     dispatch = _useEnhancedReducer[1];
   return [getState(state, props), dispatch];
@@ -2022,6 +2032,18 @@ function getChangesOnSelection(props, highlightedIndex, inputValue) {
   }));
 }
 
+/**
+ * Check if a state is equal for dropdowns, by comparing isOpen, inputValue, highlightedIndex and selected item.
+ * Used by useSelect and useCombobox.
+ *
+ * @param {Object} prevState
+ * @param {Object} newState
+ * @returns {boolean} Wheather the states are deeply equal.
+ */
+function isDropdownsStateEqual(prevState, newState) {
+  return prevState.isOpen === newState.isOpen && prevState.inputValue === newState.inputValue && prevState.highlightedIndex === newState.highlightedIndex && prevState.selectedItem === newState.selectedItem;
+}
+
 // Shared between all exports.
 var commonPropTypes = {
   environment: PropTypes__default["default"].shape({
@@ -2344,14 +2366,13 @@ function useSelect(userProps) {
     getA11ySelectionMessage = props.getA11ySelectionMessage,
     getA11yStatusMessage = props.getA11yStatusMessage;
   // Initial state depending on controlled props.
-  var _useControlledReducer = useControlledReducer$1(downshiftSelectReducer, props, getInitialState$2),
+  var _useControlledReducer = useControlledReducer$1(downshiftSelectReducer, props, getInitialState$2, isDropdownsStateEqual),
     state = _useControlledReducer[0],
     dispatch = _useControlledReducer[1];
   var isOpen = state.isOpen,
     highlightedIndex = state.highlightedIndex,
     selectedItem = state.selectedItem,
     inputValue = state.inputValue;
-
   // Element efs.
   var toggleButtonRef = React.useRef(null);
   var menuRef = React.useRef(null);
@@ -2829,11 +2850,12 @@ var propTypes$1 = _extends__default["default"]({}, commonDropdownPropTypes, {
  * @param {Function} reducer Reducer function from downshift.
  * @param {Object} props The hook props, also passed to createInitialState.
  * @param {Function} createInitialState Function that returns the initial state.
+ * @param {Function} isStateEqual Function that checks if a previous state is equal to the next.
  * @returns {Array} An array with the state and an action dispatcher.
  */
-function useControlledReducer(reducer, props, createInitialState) {
+function useControlledReducer(reducer, props, createInitialState, isStateEqual) {
   var previousSelectedItemRef = React.useRef();
-  var _useEnhancedReducer = useEnhancedReducer(reducer, props, createInitialState),
+  var _useEnhancedReducer = useEnhancedReducer(reducer, props, createInitialState, isStateEqual),
     state = _useEnhancedReducer[0],
     dispatch = _useEnhancedReducer[1];
 
@@ -3007,7 +3029,7 @@ function useCombobox(userProps) {
     getA11ySelectionMessage = props.getA11ySelectionMessage,
     itemToString = props.itemToString;
   // Initial state depending on controlled props.
-  var _useControlledReducer = useControlledReducer(downshiftUseComboboxReducer, props, getInitialState$1),
+  var _useControlledReducer = useControlledReducer(downshiftUseComboboxReducer, props, getInitialState$1, isDropdownsStateEqual),
     state = _useControlledReducer[0],
     dispatch = _useControlledReducer[1];
   var isOpen = state.isOpen,
@@ -3492,6 +3514,18 @@ function getA11yRemovalMessage(selectionParameters) {
     itemToStringLocal = selectionParameters.itemToString;
   return itemToStringLocal(removedSelectedItem) + " has been removed.";
 }
+
+/**
+ * Check if a state is equal for taglist, by comparing active index and selected items.
+ * Used by useSelect and useCombobox.
+ *
+ * @param {Object} prevState
+ * @param {Object} newState
+ * @returns {boolean} Wheather the states are deeply equal.
+ */
+function isStateEqual(prevState, newState) {
+  return prevState.selectedItems === newState.selectedItems && prevState.activeIndex === newState.activeIndex;
+}
 var propTypes = _extends__default["default"]({}, commonPropTypes, {
   selectedItems: PropTypes__default["default"].array,
   initialSelectedItems: PropTypes__default["default"].array,
@@ -3681,7 +3715,7 @@ function useMultipleSelection(userProps) {
     keyNavigationPrevious = props.keyNavigationPrevious;
 
   // Reducer init.
-  var _useControlledReducer = useControlledReducer$1(downshiftMultipleSelectionReducer, props, getInitialState),
+  var _useControlledReducer = useControlledReducer$1(downshiftMultipleSelectionReducer, props, getInitialState, isStateEqual),
     state = _useControlledReducer[0],
     dispatch = _useControlledReducer[1];
   var activeIndex = state.activeIndex,

package/dist/downshift.esm.js

@@ -1684,9 +1684,10 @@ function useLatestRef(val) {
  * @param {Function} reducer Reducer function from downshift.
  * @param {Object} props The hook props, also passed to createInitialState.
  * @param {Function} createInitialState Function that returns the initial state.
+ * @param {Function} isStateEqual Function that checks if a previous state is equal to the next.
  * @returns {Array} An array with the state and an action dispatcher.
  */
-function useEnhancedReducer(reducer, props, createInitialState) {
+function useEnhancedReducer(reducer, props, createInitialState, isStateEqual) {
   var prevStateRef = useRef();
   var actionRef = useRef();
   var enhancedReducer = useCallback(function (state, action) {
@@ -1709,11 +1710,19 @@ function useEnhancedReducer(reducer, props, createInitialState) {
   }, [propsRef]);
   var action = actionRef.current;
   useEffect(function () {
-    if (action && prevStateRef.current && prevStateRef.current !== state) {
+    console.log('effect');
+    var shouldCallOnChangeProps = action && prevStateRef.current && !isStateEqual(prevStateRef.current, state);
+    console.log('passed', prevStateRef.current, state);
+    if (shouldCallOnChangeProps) {
       callOnChangeProps(action, getState(prevStateRef.current, action.props), state);
     }
     prevStateRef.current = state;
-  }, [state, props, action]);
+  }, [state, action, isStateEqual]);
+  useEffect(function () {
+    if (props) {
+      prevStateRef.current = getState(prevStateRef.current, props);
+    }
+  }, [props]);
   return [state, dispatchWithProps];
 }
 
@@ -1724,10 +1733,11 @@ function useEnhancedReducer(reducer, props, createInitialState) {
  * @param {Function} reducer Reducer function from downshift.
  * @param {Object} props The hook props, also passed to createInitialState.
  * @param {Function} createInitialState Function that returns the initial state.
+ * @param {Function} isStateEqual Function that checks if a previous state is equal to the next.
  * @returns {Array} An array with the state and an action dispatcher.
  */
-function useControlledReducer$1(reducer, props, createInitialState) {
-  var _useEnhancedReducer = useEnhancedReducer(reducer, props, createInitialState),
+function useControlledReducer$1(reducer, props, createInitialState, isStateEqual) {
+  var _useEnhancedReducer = useEnhancedReducer(reducer, props, createInitialState, isStateEqual),
     state = _useEnhancedReducer[0],
     dispatch = _useEnhancedReducer[1];
   return [getState(state, props), dispatch];
@@ -2009,6 +2019,18 @@ function getChangesOnSelection(props, highlightedIndex, inputValue) {
   }));
 }
 
+/**
+ * Check if a state is equal for dropdowns, by comparing isOpen, inputValue, highlightedIndex and selected item.
+ * Used by useSelect and useCombobox.
+ *
+ * @param {Object} prevState
+ * @param {Object} newState
+ * @returns {boolean} Wheather the states are deeply equal.
+ */
+function isDropdownsStateEqual(prevState, newState) {
+  return prevState.isOpen === newState.isOpen && prevState.inputValue === newState.inputValue && prevState.highlightedIndex === newState.highlightedIndex && prevState.selectedItem === newState.selectedItem;
+}
+
 // Shared between all exports.
 var commonPropTypes = {
   environment: PropTypes.shape({
@@ -2331,14 +2353,13 @@ function useSelect(userProps) {
     getA11ySelectionMessage = props.getA11ySelectionMessage,
     getA11yStatusMessage = props.getA11yStatusMessage;
   // Initial state depending on controlled props.
-  var _useControlledReducer = useControlledReducer$1(downshiftSelectReducer, props, getInitialState$2),
+  var _useControlledReducer = useControlledReducer$1(downshiftSelectReducer, props, getInitialState$2, isDropdownsStateEqual),
     state = _useControlledReducer[0],
     dispatch = _useControlledReducer[1];
   var isOpen = state.isOpen,
     highlightedIndex = state.highlightedIndex,
     selectedItem = state.selectedItem,
     inputValue = state.inputValue;
-
   // Element efs.
   var toggleButtonRef = useRef(null);
   var menuRef = useRef(null);
@@ -2816,11 +2837,12 @@ var propTypes$1 = _extends({}, commonDropdownPropTypes, {
  * @param {Function} reducer Reducer function from downshift.
  * @param {Object} props The hook props, also passed to createInitialState.
  * @param {Function} createInitialState Function that returns the initial state.
+ * @param {Function} isStateEqual Function that checks if a previous state is equal to the next.
  * @returns {Array} An array with the state and an action dispatcher.
  */
-function useControlledReducer(reducer, props, createInitialState) {
+function useControlledReducer(reducer, props, createInitialState, isStateEqual) {
   var previousSelectedItemRef = useRef();
-  var _useEnhancedReducer = useEnhancedReducer(reducer, props, createInitialState),
+  var _useEnhancedReducer = useEnhancedReducer(reducer, props, createInitialState, isStateEqual),
     state = _useEnhancedReducer[0],
     dispatch = _useEnhancedReducer[1];
 
@@ -2994,7 +3016,7 @@ function useCombobox(userProps) {
     getA11ySelectionMessage = props.getA11ySelectionMessage,
     itemToString = props.itemToString;
   // Initial state depending on controlled props.
-  var _useControlledReducer = useControlledReducer(downshiftUseComboboxReducer, props, getInitialState$1),
+  var _useControlledReducer = useControlledReducer(downshiftUseComboboxReducer, props, getInitialState$1, isDropdownsStateEqual),
     state = _useControlledReducer[0],
     dispatch = _useControlledReducer[1];
   var isOpen = state.isOpen,
@@ -3479,6 +3501,18 @@ function getA11yRemovalMessage(selectionParameters) {
     itemToStringLocal = selectionParameters.itemToString;
   return itemToStringLocal(removedSelectedItem) + " has been removed.";
 }
+
+/**
+ * Check if a state is equal for taglist, by comparing active index and selected items.
+ * Used by useSelect and useCombobox.
+ *
+ * @param {Object} prevState
+ * @param {Object} newState
+ * @returns {boolean} Wheather the states are deeply equal.
+ */
+function isStateEqual(prevState, newState) {
+  return prevState.selectedItems === newState.selectedItems && prevState.activeIndex === newState.activeIndex;
+}
 var propTypes = _extends({}, commonPropTypes, {
   selectedItems: PropTypes.array,
   initialSelectedItems: PropTypes.array,
@@ -3668,7 +3702,7 @@ function useMultipleSelection(userProps) {
     keyNavigationPrevious = props.keyNavigationPrevious;
 
   // Reducer init.
-  var _useControlledReducer = useControlledReducer$1(downshiftMultipleSelectionReducer, props, getInitialState),
+  var _useControlledReducer = useControlledReducer$1(downshiftMultipleSelectionReducer, props, getInitialState, isStateEqual),
     state = _useControlledReducer[0],
     dispatch = _useControlledReducer[1];
   var activeIndex = state.activeIndex,

package/dist/downshift.native.cjs.js

@@ -1593,9 +1593,10 @@ function useLatestRef(val) {
  * @param {Function} reducer Reducer function from downshift.
  * @param {Object} props The hook props, also passed to createInitialState.
  * @param {Function} createInitialState Function that returns the initial state.
+ * @param {Function} isStateEqual Function that checks if a previous state is equal to the next.
  * @returns {Array} An array with the state and an action dispatcher.
  */
-function useEnhancedReducer(reducer, props, createInitialState) {
+function useEnhancedReducer(reducer, props, createInitialState, isStateEqual) {
   var prevStateRef = React.useRef();
   var actionRef = React.useRef();
   var enhancedReducer = React.useCallback(function (state, action) {
@@ -1618,11 +1619,19 @@ function useEnhancedReducer(reducer, props, createInitialState) {
   }, [propsRef]);
   var action = actionRef.current;
   React.useEffect(function () {
-    if (action && prevStateRef.current && prevStateRef.current !== state) {
+    console.log('effect');
+    var shouldCallOnChangeProps = action && prevStateRef.current && !isStateEqual(prevStateRef.current, state);
+    console.log('passed', prevStateRef.current, state);
+    if (shouldCallOnChangeProps) {
       callOnChangeProps(action, getState(prevStateRef.current, action.props), state);
     }
     prevStateRef.current = state;
-  }, [state, props, action]);
+  }, [state, action, isStateEqual]);
+  React.useEffect(function () {
+    if (props) {
+      prevStateRef.current = getState(prevStateRef.current, props);
+    }
+  }, [props]);
   return [state, dispatchWithProps];
 }
 
@@ -1633,10 +1642,11 @@ function useEnhancedReducer(reducer, props, createInitialState) {
  * @param {Function} reducer Reducer function from downshift.
  * @param {Object} props The hook props, also passed to createInitialState.
  * @param {Function} createInitialState Function that returns the initial state.
+ * @param {Function} isStateEqual Function that checks if a previous state is equal to the next.
  * @returns {Array} An array with the state and an action dispatcher.
  */
-function useControlledReducer$1(reducer, props, createInitialState) {
-  var _useEnhancedReducer = useEnhancedReducer(reducer, props, createInitialState),
+function useControlledReducer$1(reducer, props, createInitialState, isStateEqual) {
+  var _useEnhancedReducer = useEnhancedReducer(reducer, props, createInitialState, isStateEqual),
     state = _useEnhancedReducer[0],
     dispatch = _useEnhancedReducer[1];
   return [getState(state, props), dispatch];
@@ -1877,6 +1887,18 @@ function getChangesOnSelection(props, highlightedIndex, inputValue) {
   }));
 }
 
+/**
+ * Check if a state is equal for dropdowns, by comparing isOpen, inputValue, highlightedIndex and selected item.
+ * Used by useSelect and useCombobox.
+ *
+ * @param {Object} prevState
+ * @param {Object} newState
+ * @returns {boolean} Wheather the states are deeply equal.
+ */
+function isDropdownsStateEqual(prevState, newState) {
+  return prevState.isOpen === newState.isOpen && prevState.inputValue === newState.inputValue && prevState.highlightedIndex === newState.highlightedIndex && prevState.selectedItem === newState.selectedItem;
+}
+
 // Shared between all exports.
 var commonPropTypes = {
   environment: PropTypes__default["default"].shape({
@@ -2199,14 +2221,13 @@ function useSelect(userProps) {
     getA11ySelectionMessage = props.getA11ySelectionMessage,
     getA11yStatusMessage = props.getA11yStatusMessage;
   // Initial state depending on controlled props.
-  var _useControlledReducer = useControlledReducer$1(downshiftSelectReducer, props, getInitialState$2),
+  var _useControlledReducer = useControlledReducer$1(downshiftSelectReducer, props, getInitialState$2, isDropdownsStateEqual),
     state = _useControlledReducer[0],
     dispatch = _useControlledReducer[1];
   var isOpen = state.isOpen,
     highlightedIndex = state.highlightedIndex,
     selectedItem = state.selectedItem,
     inputValue = state.inputValue;
-
   // Element efs.
   var toggleButtonRef = React.useRef(null);
   var menuRef = React.useRef(null);
@@ -2668,11 +2689,12 @@ var propTypes$1 = _extends__default["default"]({}, commonDropdownPropTypes, {
  * @param {Function} reducer Reducer function from downshift.
  * @param {Object} props The hook props, also passed to createInitialState.
  * @param {Function} createInitialState Function that returns the initial state.
+ * @param {Function} isStateEqual Function that checks if a previous state is equal to the next.
  * @returns {Array} An array with the state and an action dispatcher.
  */
-function useControlledReducer(reducer, props, createInitialState) {
+function useControlledReducer(reducer, props, createInitialState, isStateEqual) {
   var previousSelectedItemRef = React.useRef();
-  var _useEnhancedReducer = useEnhancedReducer(reducer, props, createInitialState),
+  var _useEnhancedReducer = useEnhancedReducer(reducer, props, createInitialState, isStateEqual),
     state = _useEnhancedReducer[0],
     dispatch = _useEnhancedReducer[1];
 
@@ -2846,7 +2868,7 @@ function useCombobox(userProps) {
     getA11ySelectionMessage = props.getA11ySelectionMessage,
     itemToString = props.itemToString;
   // Initial state depending on controlled props.
-  var _useControlledReducer = useControlledReducer(downshiftUseComboboxReducer, props, getInitialState$1),
+  var _useControlledReducer = useControlledReducer(downshiftUseComboboxReducer, props, getInitialState$1, isDropdownsStateEqual),
     state = _useControlledReducer[0],
     dispatch = _useControlledReducer[1];
   var isOpen = state.isOpen,
@@ -3338,6 +3360,18 @@ function getA11yRemovalMessage(selectionParameters) {
     itemToStringLocal = selectionParameters.itemToString;
   return itemToStringLocal(removedSelectedItem) + " has been removed.";
 }
+
+/**
+ * Check if a state is equal for taglist, by comparing active index and selected items.
+ * Used by useSelect and useCombobox.
+ *
+ * @param {Object} prevState
+ * @param {Object} newState
+ * @returns {boolean} Wheather the states are deeply equal.
+ */
+function isStateEqual(prevState, newState) {
+  return prevState.selectedItems === newState.selectedItems && prevState.activeIndex === newState.activeIndex;
+}
 var propTypes = _extends__default["default"]({}, commonPropTypes, {
   selectedItems: PropTypes__default["default"].array,
   initialSelectedItems: PropTypes__default["default"].array,
@@ -3527,7 +3561,7 @@ function useMultipleSelection(userProps) {
     keyNavigationPrevious = props.keyNavigationPrevious;
 
   // Reducer init.
-  var _useControlledReducer = useControlledReducer$1(downshiftMultipleSelectionReducer, props, getInitialState),
+  var _useControlledReducer = useControlledReducer$1(downshiftMultipleSelectionReducer, props, getInitialState, isStateEqual),
     state = _useControlledReducer[0],
     dispatch = _useControlledReducer[1];
   var activeIndex = state.activeIndex,

package/dist/downshift.nativeweb.cjs.js

@@ -1692,9 +1692,10 @@ function useLatestRef(val) {
  * @param {Function} reducer Reducer function from downshift.
  * @param {Object} props The hook props, also passed to createInitialState.
  * @param {Function} createInitialState Function that returns the initial state.
+ * @param {Function} isStateEqual Function that checks if a previous state is equal to the next.
  * @returns {Array} An array with the state and an action dispatcher.
  */
-function useEnhancedReducer(reducer, props, createInitialState) {
+function useEnhancedReducer(reducer, props, createInitialState, isStateEqual) {
   var prevStateRef = React.useRef();
   var actionRef = React.useRef();
   var enhancedReducer = React.useCallback(function (state, action) {
@@ -1717,11 +1718,19 @@ function useEnhancedReducer(reducer, props, createInitialState) {
   }, [propsRef]);
   var action = actionRef.current;
   React.useEffect(function () {
-    if (action && prevStateRef.current && prevStateRef.current !== state) {
+    console.log('effect');
+    var shouldCallOnChangeProps = action && prevStateRef.current && !isStateEqual(prevStateRef.current, state);
+    console.log('passed', prevStateRef.current, state);
+    if (shouldCallOnChangeProps) {
       callOnChangeProps(action, getState(prevStateRef.current, action.props), state);
     }
     prevStateRef.current = state;
-  }, [state, props, action]);
+  }, [state, action, isStateEqual]);
+  React.useEffect(function () {
+    if (props) {
+      prevStateRef.current = getState(prevStateRef.current, props);
+    }
+  }, [props]);
   return [state, dispatchWithProps];
 }
 
@@ -1732,10 +1741,11 @@ function useEnhancedReducer(reducer, props, createInitialState) {
  * @param {Function} reducer Reducer function from downshift.
  * @param {Object} props The hook props, also passed to createInitialState.
  * @param {Function} createInitialState Function that returns the initial state.
+ * @param {Function} isStateEqual Function that checks if a previous state is equal to the next.
  * @returns {Array} An array with the state and an action dispatcher.
  */
-function useControlledReducer$1(reducer, props, createInitialState) {
-  var _useEnhancedReducer = useEnhancedReducer(reducer, props, createInitialState),
+function useControlledReducer$1(reducer, props, createInitialState, isStateEqual) {
+  var _useEnhancedReducer = useEnhancedReducer(reducer, props, createInitialState, isStateEqual),
     state = _useEnhancedReducer[0],
     dispatch = _useEnhancedReducer[1];
   return [getState(state, props), dispatch];
@@ -2017,6 +2027,18 @@ function getChangesOnSelection(props, highlightedIndex, inputValue) {
   }));
 }
 
+/**
+ * Check if a state is equal for dropdowns, by comparing isOpen, inputValue, highlightedIndex and selected item.
+ * Used by useSelect and useCombobox.
+ *
+ * @param {Object} prevState
+ * @param {Object} newState
+ * @returns {boolean} Wheather the states are deeply equal.
+ */
+function isDropdownsStateEqual(prevState, newState) {
+  return prevState.isOpen === newState.isOpen && prevState.inputValue === newState.inputValue && prevState.highlightedIndex === newState.highlightedIndex && prevState.selectedItem === newState.selectedItem;
+}
+
 // Shared between all exports.
 var commonPropTypes = {
   environment: PropTypes__default["default"].shape({
@@ -2339,14 +2361,13 @@ function useSelect(userProps) {
     getA11ySelectionMessage = props.getA11ySelectionMessage,
     getA11yStatusMessage = props.getA11yStatusMessage;
   // Initial state depending on controlled props.
-  var _useControlledReducer = useControlledReducer$1(downshiftSelectReducer, props, getInitialState$2),
+  var _useControlledReducer = useControlledReducer$1(downshiftSelectReducer, props, getInitialState$2, isDropdownsStateEqual),
     state = _useControlledReducer[0],
     dispatch = _useControlledReducer[1];
   var isOpen = state.isOpen,
     highlightedIndex = state.highlightedIndex,
     selectedItem = state.selectedItem,
     inputValue = state.inputValue;
-
   // Element efs.
   var toggleButtonRef = React.useRef(null);
   var menuRef = React.useRef(null);
@@ -2812,11 +2833,12 @@ var propTypes$1 = _extends__default["default"]({}, commonDropdownPropTypes, {
  * @param {Function} reducer Reducer function from downshift.
  * @param {Object} props The hook props, also passed to createInitialState.
  * @param {Function} createInitialState Function that returns the initial state.
+ * @param {Function} isStateEqual Function that checks if a previous state is equal to the next.
  * @returns {Array} An array with the state and an action dispatcher.
  */
-function useControlledReducer(reducer, props, createInitialState) {
+function useControlledReducer(reducer, props, createInitialState, isStateEqual) {
   var previousSelectedItemRef = React.useRef();
-  var _useEnhancedReducer = useEnhancedReducer(reducer, props, createInitialState),
+  var _useEnhancedReducer = useEnhancedReducer(reducer, props, createInitialState, isStateEqual),
     state = _useEnhancedReducer[0],
     dispatch = _useEnhancedReducer[1];
 
@@ -2990,7 +3012,7 @@ function useCombobox(userProps) {
     getA11ySelectionMessage = props.getA11ySelectionMessage,
     itemToString = props.itemToString;
   // Initial state depending on controlled props.
-  var _useControlledReducer = useControlledReducer(downshiftUseComboboxReducer, props, getInitialState$1),
+  var _useControlledReducer = useControlledReducer(downshiftUseComboboxReducer, props, getInitialState$1, isDropdownsStateEqual),
     state = _useControlledReducer[0],
     dispatch = _useControlledReducer[1];
   var isOpen = state.isOpen,
@@ -3475,6 +3497,18 @@ function getA11yRemovalMessage(selectionParameters) {
     itemToStringLocal = selectionParameters.itemToString;
   return itemToStringLocal(removedSelectedItem) + " has been removed.";
 }
+
+/**
+ * Check if a state is equal for taglist, by comparing active index and selected items.
+ * Used by useSelect and useCombobox.
+ *
+ * @param {Object} prevState
+ * @param {Object} newState
+ * @returns {boolean} Wheather the states are deeply equal.
+ */
+function isStateEqual(prevState, newState) {
+  return prevState.selectedItems === newState.selectedItems && prevState.activeIndex === newState.activeIndex;
+}
 var propTypes = _extends__default["default"]({}, commonPropTypes, {
   selectedItems: PropTypes__default["default"].array,
   initialSelectedItems: PropTypes__default["default"].array,
@@ -3664,7 +3698,7 @@ function useMultipleSelection(userProps) {
     keyNavigationPrevious = props.keyNavigationPrevious;
 
   // Reducer init.
-  var _useControlledReducer = useControlledReducer$1(downshiftMultipleSelectionReducer, props, getInitialState),
+  var _useControlledReducer = useControlledReducer$1(downshiftMultipleSelectionReducer, props, getInitialState, isStateEqual),
     state = _useControlledReducer[0],
     dispatch = _useControlledReducer[1];
   var activeIndex = state.activeIndex,