downshift 8.2.3 → 8.2.4-alpha.1

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,12 @@ function useEnhancedReducer(reducer, props, createInitialState) {
   }, [propsRef]);
   var action = actionRef.current;
   React.useEffect(function () {
-    if (action && prevStateRef.current && prevStateRef.current !== state) {
+    var stateChanged = prevStateRef.current && !isStateEqual(prevStateRef.current, state);
+    if (action && stateChanged) {
       callOnChangeProps(action, getState(prevStateRef.current, action.props), state);
     }
     prevStateRef.current = state;
-  }, [state, props, action]);
+  }, [state, props, action, isStateEqual]);
   return [state, dispatchWithProps];
 }
 
@@ -1737,10 +1739,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 +2025,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 +2359,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 +2843,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 +3022,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 +3507,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 +3708,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,12 @@ function useEnhancedReducer(reducer, props, createInitialState) {
   }, [propsRef]);
   var action = actionRef.current;
   useEffect(function () {
-    if (action && prevStateRef.current && prevStateRef.current !== state) {
+    var stateChanged = prevStateRef.current && !isStateEqual(prevStateRef.current, state);
+    if (action && stateChanged) {
       callOnChangeProps(action, getState(prevStateRef.current, action.props), state);
     }
     prevStateRef.current = state;
-  }, [state, props, action]);
+  }, [state, props, action, isStateEqual]);
   return [state, dispatchWithProps];
 }
 
@@ -1724,10 +1726,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 +2012,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 +2346,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 +2830,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 +3009,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 +3494,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 +3695,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,12 @@ function useEnhancedReducer(reducer, props, createInitialState) {
   }, [propsRef]);
   var action = actionRef.current;
   React.useEffect(function () {
-    if (action && prevStateRef.current && prevStateRef.current !== state) {
+    var stateChanged = prevStateRef.current && !isStateEqual(prevStateRef.current, state);
+    if (action && stateChanged) {
       callOnChangeProps(action, getState(prevStateRef.current, action.props), state);
     }
     prevStateRef.current = state;
-  }, [state, props, action]);
+  }, [state, props, action, isStateEqual]);
   return [state, dispatchWithProps];
 }
 
@@ -1633,10 +1635,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 +1880,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 +2214,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 +2682,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 +2861,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 +3353,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 +3554,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,12 @@ function useEnhancedReducer(reducer, props, createInitialState) {
   }, [propsRef]);
   var action = actionRef.current;
   React.useEffect(function () {
-    if (action && prevStateRef.current && prevStateRef.current !== state) {
+    var stateChanged = prevStateRef.current && !isStateEqual(prevStateRef.current, state);
+    if (action && stateChanged) {
       callOnChangeProps(action, getState(prevStateRef.current, action.props), state);
     }
     prevStateRef.current = state;
-  }, [state, props, action]);
+  }, [state, props, action, isStateEqual]);
   return [state, dispatchWithProps];
 }
 
@@ -1732,10 +1734,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 +2020,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 +2354,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 +2826,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 +3005,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 +3490,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 +3691,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,