downshift 8.3.2 → 8.4.0

package/dist/downshift.cjs.js

@@ -1601,8 +1601,8 @@ function stateReducer(s, a) {
  */
 function getA11ySelectionMessage(selectionParameters) {
   var selectedItem = selectionParameters.selectedItem,
-    itemToStringLocal = selectionParameters.itemToString;
-  return selectedItem ? itemToStringLocal(selectedItem) + " has been selected." : '';
+    itemToString = selectionParameters.itemToString;
+  return selectedItem ? itemToString(selectedItem) + " has been selected." : '';
 }
 
 /**
@@ -1672,9 +1672,6 @@ function getItemAndIndex(itemProp, indexProp, items, errorMessage) {
   }
   return [item, index];
 }
-function itemToString(item) {
-  return item ? String(item) : '';
-}
 function isAcceptedCharacterKey(key) {
   return /^\S{1}$/.test(key);
 }
@@ -1753,7 +1750,12 @@ function useControlledReducer$1(reducer, props, createInitialState, isStateEqual
   return [getState(state, props), dispatch];
 }
 var defaultProps$3 = {
-  itemToString: itemToString,
+  itemToString: function itemToString(item) {
+    return item ? String(item) : '';
+  },
+  itemToKey: function itemToKey(item) {
+    return item;
+  },
   stateReducer: stateReducer,
   getA11ySelectionMessage: getA11ySelectionMessage,
   scrollIntoView: scrollIntoView,
@@ -1790,7 +1792,9 @@ function getInitialState$2(props) {
   var highlightedIndex = getInitialValue$1(props, 'highlightedIndex');
   var inputValue = getInitialValue$1(props, 'inputValue');
   return {
-    highlightedIndex: highlightedIndex < 0 && selectedItem && isOpen ? props.items.indexOf(selectedItem) : highlightedIndex,
+    highlightedIndex: highlightedIndex < 0 && selectedItem && isOpen ? props.items.findIndex(function (item) {
+      return props.itemToKey(item) === props.itemToKey(selectedItem);
+    }) : highlightedIndex,
     isOpen: isOpen,
     selectedItem: selectedItem,
     inputValue: inputValue
@@ -1799,7 +1803,8 @@ function getInitialState$2(props) {
 function getHighlightedIndexOnOpen(props, state, offset) {
   var items = props.items,
     initialHighlightedIndex = props.initialHighlightedIndex,
-    defaultHighlightedIndex = props.defaultHighlightedIndex;
+    defaultHighlightedIndex = props.defaultHighlightedIndex,
+    itemToKey = props.itemToKey;
   var selectedItem = state.selectedItem,
     highlightedIndex = state.highlightedIndex;
   if (items.length === 0) {
@@ -1814,7 +1819,9 @@ function getHighlightedIndexOnOpen(props, state, offset) {
     return defaultHighlightedIndex;
   }
   if (selectedItem) {
-    return items.indexOf(selectedItem);
+    return items.findIndex(function (item) {
+      return itemToKey(selectedItem) === itemToKey(item);
+    });
   }
   if (offset === 0) {
     return -1;
@@ -2073,6 +2080,7 @@ var commonPropTypes = {
     Node: PropTypes__default["default"].func.isRequired
   }),
   itemToString: PropTypes__default["default"].func,
+  itemToKey: PropTypes__default["default"].func,
   stateReducer: PropTypes__default["default"].func
 };
 
@@ -2275,7 +2283,9 @@ function downshiftSelectReducer(state, action) {
       {
         var lowercasedKey = action.key;
         var inputValue = "" + state.inputValue + lowercasedKey;
-        var prevHighlightedIndex = !state.isOpen && state.selectedItem ? props.items.indexOf(state.selectedItem) : state.highlightedIndex;
+        var prevHighlightedIndex = !state.isOpen && state.selectedItem ? props.items.findIndex(function (item) {
+          return props.itemToKey(item) === props.itemToKey(state.selectedItem);
+        }) : state.highlightedIndex;
         var highlightedIndex = getItemIndexByCharacterKey({
           keysSoFar: inputValue,
           highlightedIndex: prevHighlightedIndex,
@@ -2877,13 +2887,21 @@ function useControlledReducer(reducer, props, createInitialState, isStateEqual)
     if (!isControlledProp(props, 'selectedItem')) {
       return;
     }
-    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)
-      });
+    if (!isInitialMount // on first mount we already have the proper inputValue for a initial selected item.
+    ) {
+      var shouldCallDispatch;
+      if (props.selectedItemChanged === undefined) {
+        shouldCallDispatch = props.itemToKey(props.selectedItem) !== props.itemToKey(previousSelectedItemRef.current);
+      } else {
+        console.warn("The \"selectedItemChanged\" is deprecated. Please use \"itemToKey instead\". https://github.com/downshift-js/downshift/blob/master/src/hooks/useCombobox/README.md#selecteditemchanged");
+        shouldCallDispatch = props.selectedItemChanged(previousSelectedItemRef.current, props.selectedItem);
+      }
+      if (shouldCallDispatch) {
+        dispatch({
+          type: ControlledPropUpdatedSelectedItem,
+          inputValue: props.itemToString(props.selectedItem)
+        });
+      }
     }
     previousSelectedItemRef.current = state.selectedItem === previousSelectedItemRef.current ? props.selectedItem : state.selectedItem;
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -2900,9 +2918,6 @@ if (process.env.NODE_ENV !== 'production') {
   };
 }
 var defaultProps$1 = _extends__default["default"]({}, defaultProps$3, {
-  selectedItemChanged: function selectedItemChanged(prevItem, item) {
-    return prevItem !== item;
-  },
   getA11yStatusMessage: getA11yStatusMessage$1,
   isItemDisabled: function isItemDisabled() {
     return false;
@@ -3546,6 +3561,7 @@ var propTypes = _extends__default["default"]({}, commonPropTypes, {
 });
 var defaultProps = {
   itemToString: defaultProps$3.itemToString,
+  itemToKey: defaultProps$3.itemToKey,
   stateReducer: defaultProps$3.stateReducer,
   environment: defaultProps$3.environment,
   getA11yRemovalMessage: getA11yRemovalMessage,
@@ -3660,7 +3676,9 @@ function downshiftMultipleSelectionReducer(state, action) {
     case FunctionRemoveSelectedItem:
       {
         var _newActiveIndex = activeIndex;
-        var selectedItemIndex = selectedItems.indexOf(selectedItem);
+        var selectedItemIndex = selectedItems.findIndex(function (item) {
+          return props.itemToKey(item) === props.itemToKey(selectedItem);
+        });
         if (selectedItemIndex < 0) {
           break;
         }
@@ -3744,8 +3762,10 @@ function useMultipleSelection(userProps) {
       return;
     }
     if (selectedItems.length < previousSelectedItemsRef.current.length) {
-      var removedSelectedItem = previousSelectedItemsRef.current.find(function (item) {
-        return selectedItems.indexOf(item) < 0;
+      var removedSelectedItem = previousSelectedItemsRef.current.find(function (selectedItem) {
+        return selectedItems.findIndex(function (item) {
+          return props.itemToKey(item) === props.itemToKey(selectedItem);
+        }) < 0;
       });
       setStatus(getA11yRemovalMessage({
         itemToString: itemToString,
@@ -3769,7 +3789,8 @@ function useMultipleSelection(userProps) {
     } else if (selectedItemRefs.current[activeIndex]) {
       selectedItemRefs.current[activeIndex].focus();
     }
-  }, [activeIndex, isInitialMount]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [activeIndex]);
   useControlPropsValidator({
     props: props,
     state: state

package/dist/downshift.esm.js

@@ -1588,8 +1588,8 @@ function stateReducer(s, a) {
  */
 function getA11ySelectionMessage(selectionParameters) {
   var selectedItem = selectionParameters.selectedItem,
-    itemToStringLocal = selectionParameters.itemToString;
-  return selectedItem ? itemToStringLocal(selectedItem) + " has been selected." : '';
+    itemToString = selectionParameters.itemToString;
+  return selectedItem ? itemToString(selectedItem) + " has been selected." : '';
 }
 
 /**
@@ -1659,9 +1659,6 @@ function getItemAndIndex(itemProp, indexProp, items, errorMessage) {
   }
   return [item, index];
 }
-function itemToString(item) {
-  return item ? String(item) : '';
-}
 function isAcceptedCharacterKey(key) {
   return /^\S{1}$/.test(key);
 }
@@ -1740,7 +1737,12 @@ function useControlledReducer$1(reducer, props, createInitialState, isStateEqual
   return [getState(state, props), dispatch];
 }
 var defaultProps$3 = {
-  itemToString: itemToString,
+  itemToString: function itemToString(item) {
+    return item ? String(item) : '';
+  },
+  itemToKey: function itemToKey(item) {
+    return item;
+  },
   stateReducer: stateReducer,
   getA11ySelectionMessage: getA11ySelectionMessage,
   scrollIntoView: scrollIntoView,
@@ -1777,7 +1779,9 @@ function getInitialState$2(props) {
   var highlightedIndex = getInitialValue$1(props, 'highlightedIndex');
   var inputValue = getInitialValue$1(props, 'inputValue');
   return {
-    highlightedIndex: highlightedIndex < 0 && selectedItem && isOpen ? props.items.indexOf(selectedItem) : highlightedIndex,
+    highlightedIndex: highlightedIndex < 0 && selectedItem && isOpen ? props.items.findIndex(function (item) {
+      return props.itemToKey(item) === props.itemToKey(selectedItem);
+    }) : highlightedIndex,
     isOpen: isOpen,
     selectedItem: selectedItem,
     inputValue: inputValue
@@ -1786,7 +1790,8 @@ function getInitialState$2(props) {
 function getHighlightedIndexOnOpen(props, state, offset) {
   var items = props.items,
     initialHighlightedIndex = props.initialHighlightedIndex,
-    defaultHighlightedIndex = props.defaultHighlightedIndex;
+    defaultHighlightedIndex = props.defaultHighlightedIndex,
+    itemToKey = props.itemToKey;
   var selectedItem = state.selectedItem,
     highlightedIndex = state.highlightedIndex;
   if (items.length === 0) {
@@ -1801,7 +1806,9 @@ function getHighlightedIndexOnOpen(props, state, offset) {
     return defaultHighlightedIndex;
   }
   if (selectedItem) {
-    return items.indexOf(selectedItem);
+    return items.findIndex(function (item) {
+      return itemToKey(selectedItem) === itemToKey(item);
+    });
   }
   if (offset === 0) {
     return -1;
@@ -2060,6 +2067,7 @@ var commonPropTypes = {
     Node: PropTypes.func.isRequired
   }),
   itemToString: PropTypes.func,
+  itemToKey: PropTypes.func,
   stateReducer: PropTypes.func
 };
 
@@ -2262,7 +2270,9 @@ function downshiftSelectReducer(state, action) {
       {
         var lowercasedKey = action.key;
         var inputValue = "" + state.inputValue + lowercasedKey;
-        var prevHighlightedIndex = !state.isOpen && state.selectedItem ? props.items.indexOf(state.selectedItem) : state.highlightedIndex;
+        var prevHighlightedIndex = !state.isOpen && state.selectedItem ? props.items.findIndex(function (item) {
+          return props.itemToKey(item) === props.itemToKey(state.selectedItem);
+        }) : state.highlightedIndex;
         var highlightedIndex = getItemIndexByCharacterKey({
           keysSoFar: inputValue,
           highlightedIndex: prevHighlightedIndex,
@@ -2864,13 +2874,21 @@ function useControlledReducer(reducer, props, createInitialState, isStateEqual)
     if (!isControlledProp(props, 'selectedItem')) {
       return;
     }
-    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)
-      });
+    if (!isInitialMount // on first mount we already have the proper inputValue for a initial selected item.
+    ) {
+      var shouldCallDispatch;
+      if (props.selectedItemChanged === undefined) {
+        shouldCallDispatch = props.itemToKey(props.selectedItem) !== props.itemToKey(previousSelectedItemRef.current);
+      } else {
+        console.warn("The \"selectedItemChanged\" is deprecated. Please use \"itemToKey instead\". https://github.com/downshift-js/downshift/blob/master/src/hooks/useCombobox/README.md#selecteditemchanged");
+        shouldCallDispatch = props.selectedItemChanged(previousSelectedItemRef.current, props.selectedItem);
+      }
+      if (shouldCallDispatch) {
+        dispatch({
+          type: ControlledPropUpdatedSelectedItem,
+          inputValue: props.itemToString(props.selectedItem)
+        });
+      }
     }
     previousSelectedItemRef.current = state.selectedItem === previousSelectedItemRef.current ? props.selectedItem : state.selectedItem;
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -2887,9 +2905,6 @@ if (process.env.NODE_ENV !== 'production') {
   };
 }
 var defaultProps$1 = _extends({}, defaultProps$3, {
-  selectedItemChanged: function selectedItemChanged(prevItem, item) {
-    return prevItem !== item;
-  },
   getA11yStatusMessage: getA11yStatusMessage$1,
   isItemDisabled: function isItemDisabled() {
     return false;
@@ -3533,6 +3548,7 @@ var propTypes = _extends({}, commonPropTypes, {
 });
 var defaultProps = {
   itemToString: defaultProps$3.itemToString,
+  itemToKey: defaultProps$3.itemToKey,
   stateReducer: defaultProps$3.stateReducer,
   environment: defaultProps$3.environment,
   getA11yRemovalMessage: getA11yRemovalMessage,
@@ -3647,7 +3663,9 @@ function downshiftMultipleSelectionReducer(state, action) {
     case FunctionRemoveSelectedItem:
       {
         var _newActiveIndex = activeIndex;
-        var selectedItemIndex = selectedItems.indexOf(selectedItem);
+        var selectedItemIndex = selectedItems.findIndex(function (item) {
+          return props.itemToKey(item) === props.itemToKey(selectedItem);
+        });
         if (selectedItemIndex < 0) {
           break;
         }
@@ -3731,8 +3749,10 @@ function useMultipleSelection(userProps) {
       return;
     }
     if (selectedItems.length < previousSelectedItemsRef.current.length) {
-      var removedSelectedItem = previousSelectedItemsRef.current.find(function (item) {
-        return selectedItems.indexOf(item) < 0;
+      var removedSelectedItem = previousSelectedItemsRef.current.find(function (selectedItem) {
+        return selectedItems.findIndex(function (item) {
+          return props.itemToKey(item) === props.itemToKey(selectedItem);
+        }) < 0;
       });
       setStatus(getA11yRemovalMessage({
         itemToString: itemToString,
@@ -3756,7 +3776,8 @@ function useMultipleSelection(userProps) {
     } else if (selectedItemRefs.current[activeIndex]) {
       selectedItemRefs.current[activeIndex].focus();
     }
-  }, [activeIndex, isInitialMount]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [activeIndex]);
   useControlPropsValidator({
     props: props,
     state: state

package/dist/downshift.native.cjs.js

@@ -1500,8 +1500,8 @@ function stateReducer(s, a) {
  */
 function getA11ySelectionMessage(selectionParameters) {
   var selectedItem = selectionParameters.selectedItem,
-    itemToStringLocal = selectionParameters.itemToString;
-  return selectedItem ? itemToStringLocal(selectedItem) + " has been selected." : '';
+    itemToString = selectionParameters.itemToString;
+  return selectedItem ? itemToString(selectedItem) + " has been selected." : '';
 }
 
 /**
@@ -1571,9 +1571,6 @@ function getItemAndIndex(itemProp, indexProp, items, errorMessage) {
   }
   return [item, index];
 }
-function itemToString(item) {
-  return item ? String(item) : '';
-}
 function capitalizeString(string) {
   return "" + string.slice(0, 1).toUpperCase() + string.slice(1);
 }
@@ -1649,7 +1646,12 @@ function useControlledReducer$1(reducer, props, createInitialState, isStateEqual
   return [getState(state, props), dispatch];
 }
 var defaultProps$3 = {
-  itemToString: itemToString,
+  itemToString: function itemToString(item) {
+    return item ? String(item) : '';
+  },
+  itemToKey: function itemToKey(item) {
+    return item;
+  },
   stateReducer: stateReducer,
   getA11ySelectionMessage: getA11ySelectionMessage,
   scrollIntoView: scrollIntoView,
@@ -1686,7 +1688,9 @@ function getInitialState$2(props) {
   var highlightedIndex = getInitialValue$1(props, 'highlightedIndex');
   var inputValue = getInitialValue$1(props, 'inputValue');
   return {
-    highlightedIndex: highlightedIndex < 0 && selectedItem && isOpen ? props.items.indexOf(selectedItem) : highlightedIndex,
+    highlightedIndex: highlightedIndex < 0 && selectedItem && isOpen ? props.items.findIndex(function (item) {
+      return props.itemToKey(item) === props.itemToKey(selectedItem);
+    }) : highlightedIndex,
     isOpen: isOpen,
     selectedItem: selectedItem,
     inputValue: inputValue
@@ -1695,7 +1699,8 @@ function getInitialState$2(props) {
 function getHighlightedIndexOnOpen(props, state, offset) {
   var items = props.items,
     initialHighlightedIndex = props.initialHighlightedIndex,
-    defaultHighlightedIndex = props.defaultHighlightedIndex;
+    defaultHighlightedIndex = props.defaultHighlightedIndex,
+    itemToKey = props.itemToKey;
   var selectedItem = state.selectedItem,
     highlightedIndex = state.highlightedIndex;
   if (items.length === 0) {
@@ -1710,7 +1715,9 @@ function getHighlightedIndexOnOpen(props, state, offset) {
     return defaultHighlightedIndex;
   }
   if (selectedItem) {
-    return items.indexOf(selectedItem);
+    return items.findIndex(function (item) {
+      return itemToKey(selectedItem) === itemToKey(item);
+    });
   }
   if (offset === 0) {
     return -1;
@@ -1925,6 +1932,7 @@ var commonPropTypes = {
     Node: PropTypes__default["default"].func.isRequired
   }),
   itemToString: PropTypes__default["default"].func,
+  itemToKey: PropTypes__default["default"].func,
   stateReducer: PropTypes__default["default"].func
 };
 
@@ -2127,7 +2135,9 @@ function downshiftSelectReducer(state, action) {
       {
         var lowercasedKey = action.key;
         var inputValue = "" + state.inputValue + lowercasedKey;
-        var prevHighlightedIndex = !state.isOpen && state.selectedItem ? props.items.indexOf(state.selectedItem) : state.highlightedIndex;
+        var prevHighlightedIndex = !state.isOpen && state.selectedItem ? props.items.findIndex(function (item) {
+          return props.itemToKey(item) === props.itemToKey(state.selectedItem);
+        }) : state.highlightedIndex;
         var highlightedIndex = getItemIndexByCharacterKey({
           keysSoFar: inputValue,
           highlightedIndex: prevHighlightedIndex,
@@ -2713,13 +2723,21 @@ function useControlledReducer(reducer, props, createInitialState, isStateEqual)
     if (!isControlledProp(props, 'selectedItem')) {
       return;
     }
-    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)
-      });
+    if (!isInitialMount // on first mount we already have the proper inputValue for a initial selected item.
+    ) {
+      var shouldCallDispatch;
+      if (props.selectedItemChanged === undefined) {
+        shouldCallDispatch = props.itemToKey(props.selectedItem) !== props.itemToKey(previousSelectedItemRef.current);
+      } else {
+        console.warn("The \"selectedItemChanged\" is deprecated. Please use \"itemToKey instead\". https://github.com/downshift-js/downshift/blob/master/src/hooks/useCombobox/README.md#selecteditemchanged");
+        shouldCallDispatch = props.selectedItemChanged(previousSelectedItemRef.current, props.selectedItem);
+      }
+      if (shouldCallDispatch) {
+        dispatch({
+          type: ControlledPropUpdatedSelectedItem,
+          inputValue: props.itemToString(props.selectedItem)
+        });
+      }
     }
     previousSelectedItemRef.current = state.selectedItem === previousSelectedItemRef.current ? props.selectedItem : state.selectedItem;
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -2736,9 +2754,6 @@ if (process.env.NODE_ENV !== 'production') {
   };
 }
 var defaultProps$1 = _extends__default["default"]({}, defaultProps$3, {
-  selectedItemChanged: function selectedItemChanged(prevItem, item) {
-    return prevItem !== item;
-  },
   getA11yStatusMessage: getA11yStatusMessage$1,
   isItemDisabled: function isItemDisabled() {
     return false;
@@ -3389,6 +3404,7 @@ var propTypes = _extends__default["default"]({}, commonPropTypes, {
 });
 var defaultProps = {
   itemToString: defaultProps$3.itemToString,
+  itemToKey: defaultProps$3.itemToKey,
   stateReducer: defaultProps$3.stateReducer,
   environment: defaultProps$3.environment,
   getA11yRemovalMessage: getA11yRemovalMessage,
@@ -3503,7 +3519,9 @@ function downshiftMultipleSelectionReducer(state, action) {
     case FunctionRemoveSelectedItem:
       {
         var _newActiveIndex = activeIndex;
-        var selectedItemIndex = selectedItems.indexOf(selectedItem);
+        var selectedItemIndex = selectedItems.findIndex(function (item) {
+          return props.itemToKey(item) === props.itemToKey(selectedItem);
+        });
         if (selectedItemIndex < 0) {
           break;
         }
@@ -3587,8 +3605,10 @@ function useMultipleSelection(userProps) {
       return;
     }
     if (selectedItems.length < previousSelectedItemsRef.current.length) {
-      var removedSelectedItem = previousSelectedItemsRef.current.find(function (item) {
-        return selectedItems.indexOf(item) < 0;
+      var removedSelectedItem = previousSelectedItemsRef.current.find(function (selectedItem) {
+        return selectedItems.findIndex(function (item) {
+          return props.itemToKey(item) === props.itemToKey(selectedItem);
+        }) < 0;
       });
       setStatus(getA11yRemovalMessage({
         itemToString: itemToString,
@@ -3612,7 +3632,8 @@ function useMultipleSelection(userProps) {
     } else if (selectedItemRefs.current[activeIndex]) {
       selectedItemRefs.current[activeIndex].focus();
     }
-  }, [activeIndex, isInitialMount]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [activeIndex]);
   useControlPropsValidator({
     props: props,
     state: state

package/dist/downshift.nativeweb.cjs.js

@@ -1599,8 +1599,8 @@ function stateReducer(s, a) {
  */
 function getA11ySelectionMessage(selectionParameters) {
   var selectedItem = selectionParameters.selectedItem,
-    itemToStringLocal = selectionParameters.itemToString;
-  return selectedItem ? itemToStringLocal(selectedItem) + " has been selected." : '';
+    itemToString = selectionParameters.itemToString;
+  return selectedItem ? itemToString(selectedItem) + " has been selected." : '';
 }
 
 /**
@@ -1670,9 +1670,6 @@ function getItemAndIndex(itemProp, indexProp, items, errorMessage) {
   }
   return [item, index];
 }
-function itemToString(item) {
-  return item ? String(item) : '';
-}
 function capitalizeString(string) {
   return "" + string.slice(0, 1).toUpperCase() + string.slice(1);
 }
@@ -1748,7 +1745,12 @@ function useControlledReducer$1(reducer, props, createInitialState, isStateEqual
   return [getState(state, props), dispatch];
 }
 var defaultProps$3 = {
-  itemToString: itemToString,
+  itemToString: function itemToString(item) {
+    return item ? String(item) : '';
+  },
+  itemToKey: function itemToKey(item) {
+    return item;
+  },
   stateReducer: stateReducer,
   getA11ySelectionMessage: getA11ySelectionMessage,
   scrollIntoView: scrollIntoView,
@@ -1785,7 +1787,9 @@ function getInitialState$2(props) {
   var highlightedIndex = getInitialValue$1(props, 'highlightedIndex');
   var inputValue = getInitialValue$1(props, 'inputValue');
   return {
-    highlightedIndex: highlightedIndex < 0 && selectedItem && isOpen ? props.items.indexOf(selectedItem) : highlightedIndex,
+    highlightedIndex: highlightedIndex < 0 && selectedItem && isOpen ? props.items.findIndex(function (item) {
+      return props.itemToKey(item) === props.itemToKey(selectedItem);
+    }) : highlightedIndex,
     isOpen: isOpen,
     selectedItem: selectedItem,
     inputValue: inputValue
@@ -1794,7 +1798,8 @@ function getInitialState$2(props) {
 function getHighlightedIndexOnOpen(props, state, offset) {
   var items = props.items,
     initialHighlightedIndex = props.initialHighlightedIndex,
-    defaultHighlightedIndex = props.defaultHighlightedIndex;
+    defaultHighlightedIndex = props.defaultHighlightedIndex,
+    itemToKey = props.itemToKey;
   var selectedItem = state.selectedItem,
     highlightedIndex = state.highlightedIndex;
   if (items.length === 0) {
@@ -1809,7 +1814,9 @@ function getHighlightedIndexOnOpen(props, state, offset) {
     return defaultHighlightedIndex;
   }
   if (selectedItem) {
-    return items.indexOf(selectedItem);
+    return items.findIndex(function (item) {
+      return itemToKey(selectedItem) === itemToKey(item);
+    });
   }
   if (offset === 0) {
     return -1;
@@ -2068,6 +2075,7 @@ var commonPropTypes = {
     Node: PropTypes__default["default"].func.isRequired
   }),
   itemToString: PropTypes__default["default"].func,
+  itemToKey: PropTypes__default["default"].func,
   stateReducer: PropTypes__default["default"].func
 };
 
@@ -2270,7 +2278,9 @@ function downshiftSelectReducer(state, action) {
       {
         var lowercasedKey = action.key;
         var inputValue = "" + state.inputValue + lowercasedKey;
-        var prevHighlightedIndex = !state.isOpen && state.selectedItem ? props.items.indexOf(state.selectedItem) : state.highlightedIndex;
+        var prevHighlightedIndex = !state.isOpen && state.selectedItem ? props.items.findIndex(function (item) {
+          return props.itemToKey(item) === props.itemToKey(state.selectedItem);
+        }) : state.highlightedIndex;
         var highlightedIndex = getItemIndexByCharacterKey({
           keysSoFar: inputValue,
           highlightedIndex: prevHighlightedIndex,
@@ -2860,13 +2870,21 @@ function useControlledReducer(reducer, props, createInitialState, isStateEqual)
     if (!isControlledProp(props, 'selectedItem')) {
       return;
     }
-    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)
-      });
+    if (!isInitialMount // on first mount we already have the proper inputValue for a initial selected item.
+    ) {
+      var shouldCallDispatch;
+      if (props.selectedItemChanged === undefined) {
+        shouldCallDispatch = props.itemToKey(props.selectedItem) !== props.itemToKey(previousSelectedItemRef.current);
+      } else {
+        console.warn("The \"selectedItemChanged\" is deprecated. Please use \"itemToKey instead\". https://github.com/downshift-js/downshift/blob/master/src/hooks/useCombobox/README.md#selecteditemchanged");
+        shouldCallDispatch = props.selectedItemChanged(previousSelectedItemRef.current, props.selectedItem);
+      }
+      if (shouldCallDispatch) {
+        dispatch({
+          type: ControlledPropUpdatedSelectedItem,
+          inputValue: props.itemToString(props.selectedItem)
+        });
+      }
     }
     previousSelectedItemRef.current = state.selectedItem === previousSelectedItemRef.current ? props.selectedItem : state.selectedItem;
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -2883,9 +2901,6 @@ if (process.env.NODE_ENV !== 'production') {
   };
 }
 var defaultProps$1 = _extends__default["default"]({}, defaultProps$3, {
-  selectedItemChanged: function selectedItemChanged(prevItem, item) {
-    return prevItem !== item;
-  },
   getA11yStatusMessage: getA11yStatusMessage$1,
   isItemDisabled: function isItemDisabled() {
     return false;
@@ -3529,6 +3544,7 @@ var propTypes = _extends__default["default"]({}, commonPropTypes, {
 });
 var defaultProps = {
   itemToString: defaultProps$3.itemToString,
+  itemToKey: defaultProps$3.itemToKey,
   stateReducer: defaultProps$3.stateReducer,
   environment: defaultProps$3.environment,
   getA11yRemovalMessage: getA11yRemovalMessage,
@@ -3643,7 +3659,9 @@ function downshiftMultipleSelectionReducer(state, action) {
     case FunctionRemoveSelectedItem:
       {
         var _newActiveIndex = activeIndex;
-        var selectedItemIndex = selectedItems.indexOf(selectedItem);
+        var selectedItemIndex = selectedItems.findIndex(function (item) {
+          return props.itemToKey(item) === props.itemToKey(selectedItem);
+        });
         if (selectedItemIndex < 0) {
           break;
         }
@@ -3727,8 +3745,10 @@ function useMultipleSelection(userProps) {
       return;
     }
     if (selectedItems.length < previousSelectedItemsRef.current.length) {
-      var removedSelectedItem = previousSelectedItemsRef.current.find(function (item) {
-        return selectedItems.indexOf(item) < 0;
+      var removedSelectedItem = previousSelectedItemsRef.current.find(function (selectedItem) {
+        return selectedItems.findIndex(function (item) {
+          return props.itemToKey(item) === props.itemToKey(selectedItem);
+        }) < 0;
       });
       setStatus(getA11yRemovalMessage({
         itemToString: itemToString,
@@ -3752,7 +3772,8 @@ function useMultipleSelection(userProps) {
     } else if (selectedItemRefs.current[activeIndex]) {
       selectedItemRefs.current[activeIndex].focus();
     }
-  }, [activeIndex, isInitialMount]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [activeIndex]);
   useControlPropsValidator({
     props: props,
     state: state