downshift 7.3.2 → 7.3.4

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

@@ -75,7 +75,7 @@ export function useEnhancedReducer(reducer: Function, initialState: Object, prop
 export function useLatestRef(val: any): import("react").MutableRefObject<any>;
 export function capitalizeString(string: any): string;
 export function isAcceptedCharacterKey(key: any): boolean;
-export function getItemIndex(index: any, item: any, items: any): any;
+export function getItemAndIndex(itemProp: any, indexProp: any, items: any, errorMessage: any): any[];
 export function useElementIds({ id, labelId, menuId, getItemId, toggleButtonId, inputId, }: {
     id?: string | undefined;
     labelId: any;
@@ -90,6 +90,15 @@ export function useElementIds({ id, labelId, menuId, getItemId, toggleButtonId,
     toggleButtonId: any;
     inputId: any;
 };
+/**
+ * Handles selection on Enter / Alt + ArrowUp. Closes the menu and resets the highlighted index, unless there is a highlighted.
+ * In that case, selects the item and resets to defaults for open state and highlighted idex.
+ * @param {Object} props The useCombobox props.
+ * @param {number} highlightedIndex The index from the state.
+ * @param {boolean} inputValue Also return the input value for state.
+ * @returns The changes for the state.
+ */
+export function getChangesOnSelection(props: Object, highlightedIndex: number, inputValue?: boolean): any;
 import { noop } from "../utils";
 declare function itemToString(item: any): string;
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "downshift",
-  "version": "7.3.2",
+  "version": "7.3.4",
   "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

@@ -1566,14 +1566,19 @@ function useElementIds(_ref) {
   });
   return elementIdsRef.current;
 }
-function getItemIndex(index, item, items) {
-  if (index !== undefined) {
-    return index;
-  }
-  if (items.length === 0) {
-    return -1;
+function getItemAndIndex(itemProp, indexProp, items, errorMessage) {
+  var item, index;
+  if (itemProp === undefined) {
+    if (indexProp === undefined) {
+      throw new Error(errorMessage);
+    }
+    item = items[indexProp];
+    index = indexProp;
+  } else {
+    index = indexProp === undefined ? items.indexOf(itemProp) : indexProp;
+    item = itemProp;
   }
-  return items.indexOf(item);
+  return [item, index];
 }
 function itemToString(item) {
   return item ? String(item) : '';
@@ -1902,6 +1907,32 @@ if (process.env.NODE_ENV !== 'production') {
   };
 }
 
+/**
+ * Handles selection on Enter / Alt + ArrowUp. Closes the menu and resets the highlighted index, unless there is a highlighted.
+ * In that case, selects the item and resets to defaults for open state and highlighted idex.
+ * @param {Object} props The useCombobox props.
+ * @param {number} highlightedIndex The index from the state.
+ * @param {boolean} inputValue Also return the input value for state.
+ * @returns The changes for the state.
+ */
+function getChangesOnSelection(props, highlightedIndex, inputValue) {
+  var _props$items;
+  if (inputValue === void 0) {
+    inputValue = true;
+  }
+  var shouldSelect = ((_props$items = props.items) == null ? void 0 : _props$items.length) && highlightedIndex >= 0;
+  return _extends__default["default"]({
+    isOpen: false,
+    highlightedIndex: -1
+  }, shouldSelect && _extends__default["default"]({
+    selectedItem: props.items[highlightedIndex],
+    isOpen: getDefaultValue$1(props, 'isOpen'),
+    highlightedIndex: getDefaultValue$1(props, 'highlightedIndex')
+  }, inputValue && {
+    inputValue: props.itemToString(props.items[highlightedIndex])
+  }));
+}
+
 function downshiftCommonReducer(state, action, stateChangeTypes) {
   var type = action.type,
     props = action.props;
@@ -2093,6 +2124,7 @@ var stateChangeTypes$2 = /*#__PURE__*/Object.freeze({
 
 /* eslint-disable complexity */
 function downshiftSelectReducer(state, action) {
+  var _props$items;
   var type = action.type,
     props = action.props,
     altKey = action.altKey;
@@ -2135,12 +2167,7 @@ function downshiftSelectReducer(state, action) {
       break;
     case ToggleButtonKeyDownArrowUp:
       if (state.isOpen && altKey) {
-        changes = _extends__default["default"]({
-          isOpen: getDefaultValue$1(props, 'isOpen'),
-          highlightedIndex: getDefaultValue$1(props, 'highlightedIndex')
-        }, state.highlightedIndex >= 0 && {
-          selectedItem: props.items[state.highlightedIndex]
-        });
+        changes = getChangesOnSelection(props, state.highlightedIndex, false);
       } else {
         var _highlightedIndex2 = state.isOpen ? getNextWrappingIndex(-1, state.highlightedIndex, props.items.length, action.getItemNodeFromIndex, false) : getHighlightedIndexOnOpen(props, state, -1);
         changes = {
@@ -2152,12 +2179,7 @@ function downshiftSelectReducer(state, action) {
     // only triggered when menu is open.
     case ToggleButtonKeyDownEnter:
     case ToggleButtonKeyDownSpaceButton:
-      changes = _extends__default["default"]({
-        isOpen: getDefaultValue$1(props, 'isOpen'),
-        highlightedIndex: getDefaultValue$1(props, 'highlightedIndex')
-      }, state.highlightedIndex >= 0 && {
-        selectedItem: props.items[state.highlightedIndex]
-      });
+      changes = getChangesOnSelection(props, state.highlightedIndex, false);
       break;
     case ToggleButtonKeyDownHome:
       changes = {
@@ -2191,7 +2213,7 @@ function downshiftSelectReducer(state, action) {
       changes = _extends__default["default"]({
         isOpen: false,
         highlightedIndex: -1
-      }, state.highlightedIndex >= 0 && {
+      }, state.highlightedIndex >= 0 && ((_props$items = props.items) == null ? void 0 : _props$items.length) && {
         selectedItem: props.items[state.highlightedIndex]
       });
       break;
@@ -2563,8 +2585,9 @@ function useSelect(userProps) {
     var _latest$current = latest.current,
       latestState = _latest$current.state,
       latestProps = _latest$current.props;
-    var item = itemProp != null ? itemProp : items[indexProp];
-    var index = getItemIndex(indexProp, item, latestProps.items);
+    var _getItemAndIndex = getItemAndIndex(itemProp, indexProp, latestProps.items, 'Pass either item or index to getItemProps!'),
+      item = _getItemAndIndex[0],
+      index = _getItemAndIndex[1];
     var itemHandleMouseMove = function itemHandleMouseMove() {
       if (index === latestState.highlightedIndex) {
         return;
@@ -2582,18 +2605,14 @@ function useSelect(userProps) {
         index: index
       });
     };
-    var itemIndex = getItemIndex(index, item, latestProps.items);
-    if (itemIndex < 0) {
-      throw new Error('Pass either item or item index in getItemProps!');
-    }
     var itemProps = _extends__default["default"]((_extends4 = {
       disabled: disabled,
       role: 'option',
       'aria-selected': "" + (item === selectedItem),
-      id: elementIds.getItemId(itemIndex)
+      id: elementIds.getItemId(index)
     }, _extends4[refKey] = handleRefs(ref, function (itemNode) {
       if (itemNode) {
-        itemRefs.current[elementIds.getItemId(itemIndex)] = itemNode;
+        itemRefs.current[elementIds.getItemId(index)] = itemNode;
       }
     }), _extends4), rest);
     if (!disabled) {
@@ -2604,7 +2623,7 @@ function useSelect(userProps) {
     }
     itemProps.onMouseMove = callAllEventHandlers(onMouseMove, itemHandleMouseMove);
     return itemProps;
-  }, [latest, items, selectedItem, elementIds, shouldScrollRef, dispatch]);
+  }, [latest, selectedItem, elementIds, shouldScrollRef, dispatch]);
   return {
     // prop getters.
     getToggleButtonProps: getToggleButtonProps,
@@ -2776,6 +2795,7 @@ var defaultProps$1 = _extends__default["default"]({}, defaultProps$3, {
 
 /* eslint-disable complexity */
 function downshiftUseComboboxReducer(state, action) {
+  var _props$items;
   var type = action.type,
     props = action.props,
     altKey = action.altKey;
@@ -2804,13 +2824,7 @@ function downshiftUseComboboxReducer(state, action) {
     case InputKeyDownArrowUp:
       if (state.isOpen) {
         if (altKey) {
-          changes = _extends__default["default"]({
-            isOpen: getDefaultValue$1(props, 'isOpen'),
-            highlightedIndex: getDefaultValue$1(props, 'highlightedIndex')
-          }, state.highlightedIndex >= 0 && {
-            selectedItem: props.items[state.highlightedIndex],
-            inputValue: props.itemToString(props.items[state.highlightedIndex])
-          });
+          changes = getChangesOnSelection(props, state.highlightedIndex);
         } else {
           changes = {
             highlightedIndex: getNextWrappingIndex(-1, state.highlightedIndex, props.items.length, action.getItemNodeFromIndex, true)
@@ -2824,13 +2838,7 @@ function downshiftUseComboboxReducer(state, action) {
       }
       break;
     case InputKeyDownEnter:
-      changes = _extends__default["default"]({
-        isOpen: getDefaultValue$1(props, 'isOpen'),
-        highlightedIndex: getDefaultValue$1(props, 'highlightedIndex')
-      }, state.highlightedIndex >= 0 && {
-        selectedItem: props.items[state.highlightedIndex],
-        inputValue: props.itemToString(props.items[state.highlightedIndex])
-      });
+      changes = getChangesOnSelection(props, state.highlightedIndex);
       break;
     case InputKeyDownEscape:
       changes = _extends__default["default"]({
@@ -2865,7 +2873,7 @@ function downshiftUseComboboxReducer(state, action) {
       changes = _extends__default["default"]({
         isOpen: false,
         highlightedIndex: -1
-      }, state.highlightedIndex >= 0 && action.selectItem && {
+      }, state.highlightedIndex >= 0 && ((_props$items = props.items) == null ? void 0 : _props$items.length) && action.selectItem && {
         selectedItem: props.items[state.highlightedIndex],
         inputValue: props.itemToString(props.items[state.highlightedIndex])
       });
@@ -3133,8 +3141,8 @@ function useCombobox(userProps) {
   var getItemProps = preact.useCallback(function (_temp3) {
     var _extends3, _ref4;
     var _ref3 = _temp3 === void 0 ? {} : _temp3,
-      item = _ref3.item,
-      index = _ref3.index,
+      itemProp = _ref3.item,
+      indexProp = _ref3.index,
       _ref3$refKey = _ref3.refKey,
       refKey = _ref3$refKey === void 0 ? 'ref' : _ref3$refKey,
       ref = _ref3.ref,
@@ -3147,10 +3155,8 @@ function useCombobox(userProps) {
     var _latest$current = latest.current,
       latestProps = _latest$current.props,
       latestState = _latest$current.state;
-    var itemIndex = getItemIndex(index, item, latestProps.items);
-    if (itemIndex < 0) {
-      throw new Error('Pass either item or item index in getItemProps!');
-    }
+    var _getItemAndIndex = getItemAndIndex(itemProp, indexProp, latestProps.items, 'Pass either item or index to getItemProps!'),
+      index = _getItemAndIndex[1];
     var onSelectKey = 'onClick';
     var customClickHandler = onClick;
     var itemHandleMouseMove = function itemHandleMouseMove() {
@@ -3175,9 +3181,9 @@ function useCombobox(userProps) {
     };
     return _extends__default["default"]((_extends3 = {}, _extends3[refKey] = handleRefs(ref, function (itemNode) {
       if (itemNode) {
-        itemRefs.current[elementIds.getItemId(itemIndex)] = itemNode;
+        itemRefs.current[elementIds.getItemId(index)] = itemNode;
       }
-    }), _extends3.disabled = disabled, _extends3.role = 'option', _extends3['aria-selected'] = "" + (itemIndex === latestState.highlightedIndex), _extends3.id = elementIds.getItemId(itemIndex), _extends3), !disabled && (_ref4 = {}, _ref4[onSelectKey] = callAllEventHandlers(customClickHandler, itemHandleClick), _ref4), {
+    }), _extends3.disabled = disabled, _extends3.role = 'option', _extends3['aria-selected'] = "" + (index === latestState.highlightedIndex), _extends3.id = elementIds.getItemId(index), _extends3), !disabled && (_ref4 = {}, _ref4[onSelectKey] = callAllEventHandlers(customClickHandler, itemHandleClick), _ref4), {
       onMouseMove: callAllEventHandlers(onMouseMove, itemHandleMouseMove),
       onMouseDown: callAllEventHandlers(onMouseDown, itemHandleMouseDown)
     }, rest);
@@ -3717,14 +3723,13 @@ function useMultipleSelection(userProps) {
       ref = _ref3.ref,
       onClick = _ref3.onClick,
       onKeyDown = _ref3.onKeyDown,
-      selectedItem = _ref3.selectedItem,
-      index = _ref3.index,
+      selectedItemProp = _ref3.selectedItem,
+      indexProp = _ref3.index,
       rest = _objectWithoutPropertiesLoose__default["default"](_ref3, _excluded);
     var latestState = latest.current.state;
-    var itemIndex = getItemIndex(index, selectedItem, latestState.selectedItems);
-    if (itemIndex < 0) {
-      throw new Error('Pass either selectedItem or index in getSelectedItemProps!');
-    }
+    var _getItemAndIndex = getItemAndIndex(selectedItemProp, indexProp, latestState.selectedItems, 'Pass either item or index to getSelectedItemProps!'),
+      index = _getItemAndIndex[1];
+    var isFocusable = index > -1 && index === latestState.activeIndex;
     var selectedItemHandleClick = function selectedItemHandleClick() {
       dispatch({
         type: SelectedItemClick,
@@ -3741,7 +3746,7 @@ function useMultipleSelection(userProps) {
       if (selectedItemNode) {
         selectedItemRefs.current.push(selectedItemNode);
       }
-    }), _extends2.tabIndex = index === latestState.activeIndex ? 0 : -1, _extends2.onClick = callAllEventHandlers(onClick, selectedItemHandleClick), _extends2.onKeyDown = callAllEventHandlers(onKeyDown, selectedItemHandleKeyDown), _extends2), rest);
+    }), _extends2.tabIndex = isFocusable ? 0 : -1, _extends2.onClick = callAllEventHandlers(onClick, selectedItemHandleClick), _extends2.onKeyDown = callAllEventHandlers(onKeyDown, selectedItemHandleKeyDown), _extends2), rest);
   }, [dispatch, latest, selectedItemKeyDownHandlers]);
   var getDropdownProps = preact.useCallback(function (_temp2, _temp3) {
     var _extends3;

package/preact/dist/downshift.esm.js

@@ -1553,14 +1553,19 @@ function useElementIds(_ref) {
   });
   return elementIdsRef.current;
 }
-function getItemIndex(index, item, items) {
-  if (index !== undefined) {
-    return index;
-  }
-  if (items.length === 0) {
-    return -1;
+function getItemAndIndex(itemProp, indexProp, items, errorMessage) {
+  var item, index;
+  if (itemProp === undefined) {
+    if (indexProp === undefined) {
+      throw new Error(errorMessage);
+    }
+    item = items[indexProp];
+    index = indexProp;
+  } else {
+    index = indexProp === undefined ? items.indexOf(itemProp) : indexProp;
+    item = itemProp;
   }
-  return items.indexOf(item);
+  return [item, index];
 }
 function itemToString(item) {
   return item ? String(item) : '';
@@ -1889,6 +1894,32 @@ if (process.env.NODE_ENV !== 'production') {
   };
 }
 
+/**
+ * Handles selection on Enter / Alt + ArrowUp. Closes the menu and resets the highlighted index, unless there is a highlighted.
+ * In that case, selects the item and resets to defaults for open state and highlighted idex.
+ * @param {Object} props The useCombobox props.
+ * @param {number} highlightedIndex The index from the state.
+ * @param {boolean} inputValue Also return the input value for state.
+ * @returns The changes for the state.
+ */
+function getChangesOnSelection(props, highlightedIndex, inputValue) {
+  var _props$items;
+  if (inputValue === void 0) {
+    inputValue = true;
+  }
+  var shouldSelect = ((_props$items = props.items) == null ? void 0 : _props$items.length) && highlightedIndex >= 0;
+  return _extends({
+    isOpen: false,
+    highlightedIndex: -1
+  }, shouldSelect && _extends({
+    selectedItem: props.items[highlightedIndex],
+    isOpen: getDefaultValue$1(props, 'isOpen'),
+    highlightedIndex: getDefaultValue$1(props, 'highlightedIndex')
+  }, inputValue && {
+    inputValue: props.itemToString(props.items[highlightedIndex])
+  }));
+}
+
 function downshiftCommonReducer(state, action, stateChangeTypes) {
   var type = action.type,
     props = action.props;
@@ -2080,6 +2111,7 @@ var stateChangeTypes$2 = /*#__PURE__*/Object.freeze({
 
 /* eslint-disable complexity */
 function downshiftSelectReducer(state, action) {
+  var _props$items;
   var type = action.type,
     props = action.props,
     altKey = action.altKey;
@@ -2122,12 +2154,7 @@ function downshiftSelectReducer(state, action) {
       break;
     case ToggleButtonKeyDownArrowUp:
       if (state.isOpen && altKey) {
-        changes = _extends({
-          isOpen: getDefaultValue$1(props, 'isOpen'),
-          highlightedIndex: getDefaultValue$1(props, 'highlightedIndex')
-        }, state.highlightedIndex >= 0 && {
-          selectedItem: props.items[state.highlightedIndex]
-        });
+        changes = getChangesOnSelection(props, state.highlightedIndex, false);
       } else {
         var _highlightedIndex2 = state.isOpen ? getNextWrappingIndex(-1, state.highlightedIndex, props.items.length, action.getItemNodeFromIndex, false) : getHighlightedIndexOnOpen(props, state, -1);
         changes = {
@@ -2139,12 +2166,7 @@ function downshiftSelectReducer(state, action) {
     // only triggered when menu is open.
     case ToggleButtonKeyDownEnter:
     case ToggleButtonKeyDownSpaceButton:
-      changes = _extends({
-        isOpen: getDefaultValue$1(props, 'isOpen'),
-        highlightedIndex: getDefaultValue$1(props, 'highlightedIndex')
-      }, state.highlightedIndex >= 0 && {
-        selectedItem: props.items[state.highlightedIndex]
-      });
+      changes = getChangesOnSelection(props, state.highlightedIndex, false);
       break;
     case ToggleButtonKeyDownHome:
       changes = {
@@ -2178,7 +2200,7 @@ function downshiftSelectReducer(state, action) {
       changes = _extends({
         isOpen: false,
         highlightedIndex: -1
-      }, state.highlightedIndex >= 0 && {
+      }, state.highlightedIndex >= 0 && ((_props$items = props.items) == null ? void 0 : _props$items.length) && {
         selectedItem: props.items[state.highlightedIndex]
       });
       break;
@@ -2550,8 +2572,9 @@ function useSelect(userProps) {
     var _latest$current = latest.current,
       latestState = _latest$current.state,
       latestProps = _latest$current.props;
-    var item = itemProp != null ? itemProp : items[indexProp];
-    var index = getItemIndex(indexProp, item, latestProps.items);
+    var _getItemAndIndex = getItemAndIndex(itemProp, indexProp, latestProps.items, 'Pass either item or index to getItemProps!'),
+      item = _getItemAndIndex[0],
+      index = _getItemAndIndex[1];
     var itemHandleMouseMove = function itemHandleMouseMove() {
       if (index === latestState.highlightedIndex) {
         return;
@@ -2569,18 +2592,14 @@ function useSelect(userProps) {
         index: index
       });
     };
-    var itemIndex = getItemIndex(index, item, latestProps.items);
-    if (itemIndex < 0) {
-      throw new Error('Pass either item or item index in getItemProps!');
-    }
     var itemProps = _extends((_extends4 = {
       disabled: disabled,
       role: 'option',
       'aria-selected': "" + (item === selectedItem),
-      id: elementIds.getItemId(itemIndex)
+      id: elementIds.getItemId(index)
     }, _extends4[refKey] = handleRefs(ref, function (itemNode) {
       if (itemNode) {
-        itemRefs.current[elementIds.getItemId(itemIndex)] = itemNode;
+        itemRefs.current[elementIds.getItemId(index)] = itemNode;
       }
     }), _extends4), rest);
     if (!disabled) {
@@ -2591,7 +2610,7 @@ function useSelect(userProps) {
     }
     itemProps.onMouseMove = callAllEventHandlers(onMouseMove, itemHandleMouseMove);
     return itemProps;
-  }, [latest, items, selectedItem, elementIds, shouldScrollRef, dispatch]);
+  }, [latest, selectedItem, elementIds, shouldScrollRef, dispatch]);
   return {
     // prop getters.
     getToggleButtonProps: getToggleButtonProps,
@@ -2763,6 +2782,7 @@ var defaultProps$1 = _extends({}, defaultProps$3, {
 
 /* eslint-disable complexity */
 function downshiftUseComboboxReducer(state, action) {
+  var _props$items;
   var type = action.type,
     props = action.props,
     altKey = action.altKey;
@@ -2791,13 +2811,7 @@ function downshiftUseComboboxReducer(state, action) {
     case InputKeyDownArrowUp:
       if (state.isOpen) {
         if (altKey) {
-          changes = _extends({
-            isOpen: getDefaultValue$1(props, 'isOpen'),
-            highlightedIndex: getDefaultValue$1(props, 'highlightedIndex')
-          }, state.highlightedIndex >= 0 && {
-            selectedItem: props.items[state.highlightedIndex],
-            inputValue: props.itemToString(props.items[state.highlightedIndex])
-          });
+          changes = getChangesOnSelection(props, state.highlightedIndex);
         } else {
           changes = {
             highlightedIndex: getNextWrappingIndex(-1, state.highlightedIndex, props.items.length, action.getItemNodeFromIndex, true)
@@ -2811,13 +2825,7 @@ function downshiftUseComboboxReducer(state, action) {
       }
       break;
     case InputKeyDownEnter:
-      changes = _extends({
-        isOpen: getDefaultValue$1(props, 'isOpen'),
-        highlightedIndex: getDefaultValue$1(props, 'highlightedIndex')
-      }, state.highlightedIndex >= 0 && {
-        selectedItem: props.items[state.highlightedIndex],
-        inputValue: props.itemToString(props.items[state.highlightedIndex])
-      });
+      changes = getChangesOnSelection(props, state.highlightedIndex);
       break;
     case InputKeyDownEscape:
       changes = _extends({
@@ -2852,7 +2860,7 @@ function downshiftUseComboboxReducer(state, action) {
       changes = _extends({
         isOpen: false,
         highlightedIndex: -1
-      }, state.highlightedIndex >= 0 && action.selectItem && {
+      }, state.highlightedIndex >= 0 && ((_props$items = props.items) == null ? void 0 : _props$items.length) && action.selectItem && {
         selectedItem: props.items[state.highlightedIndex],
         inputValue: props.itemToString(props.items[state.highlightedIndex])
       });
@@ -3120,8 +3128,8 @@ function useCombobox(userProps) {
   var getItemProps = useCallback(function (_temp3) {
     var _extends3, _ref4;
     var _ref3 = _temp3 === void 0 ? {} : _temp3,
-      item = _ref3.item,
-      index = _ref3.index,
+      itemProp = _ref3.item,
+      indexProp = _ref3.index,
       _ref3$refKey = _ref3.refKey,
       refKey = _ref3$refKey === void 0 ? 'ref' : _ref3$refKey,
       ref = _ref3.ref,
@@ -3134,10 +3142,8 @@ function useCombobox(userProps) {
     var _latest$current = latest.current,
       latestProps = _latest$current.props,
       latestState = _latest$current.state;
-    var itemIndex = getItemIndex(index, item, latestProps.items);
-    if (itemIndex < 0) {
-      throw new Error('Pass either item or item index in getItemProps!');
-    }
+    var _getItemAndIndex = getItemAndIndex(itemProp, indexProp, latestProps.items, 'Pass either item or index to getItemProps!'),
+      index = _getItemAndIndex[1];
     var onSelectKey = 'onClick';
     var customClickHandler = onClick;
     var itemHandleMouseMove = function itemHandleMouseMove() {
@@ -3162,9 +3168,9 @@ function useCombobox(userProps) {
     };
     return _extends((_extends3 = {}, _extends3[refKey] = handleRefs(ref, function (itemNode) {
       if (itemNode) {
-        itemRefs.current[elementIds.getItemId(itemIndex)] = itemNode;
+        itemRefs.current[elementIds.getItemId(index)] = itemNode;
       }
-    }), _extends3.disabled = disabled, _extends3.role = 'option', _extends3['aria-selected'] = "" + (itemIndex === latestState.highlightedIndex), _extends3.id = elementIds.getItemId(itemIndex), _extends3), !disabled && (_ref4 = {}, _ref4[onSelectKey] = callAllEventHandlers(customClickHandler, itemHandleClick), _ref4), {
+    }), _extends3.disabled = disabled, _extends3.role = 'option', _extends3['aria-selected'] = "" + (index === latestState.highlightedIndex), _extends3.id = elementIds.getItemId(index), _extends3), !disabled && (_ref4 = {}, _ref4[onSelectKey] = callAllEventHandlers(customClickHandler, itemHandleClick), _ref4), {
       onMouseMove: callAllEventHandlers(onMouseMove, itemHandleMouseMove),
       onMouseDown: callAllEventHandlers(onMouseDown, itemHandleMouseDown)
     }, rest);
@@ -3704,14 +3710,13 @@ function useMultipleSelection(userProps) {
       ref = _ref3.ref,
       onClick = _ref3.onClick,
       onKeyDown = _ref3.onKeyDown,
-      selectedItem = _ref3.selectedItem,
-      index = _ref3.index,
+      selectedItemProp = _ref3.selectedItem,
+      indexProp = _ref3.index,
       rest = _objectWithoutPropertiesLoose(_ref3, _excluded);
     var latestState = latest.current.state;
-    var itemIndex = getItemIndex(index, selectedItem, latestState.selectedItems);
-    if (itemIndex < 0) {
-      throw new Error('Pass either selectedItem or index in getSelectedItemProps!');
-    }
+    var _getItemAndIndex = getItemAndIndex(selectedItemProp, indexProp, latestState.selectedItems, 'Pass either item or index to getSelectedItemProps!'),
+      index = _getItemAndIndex[1];
+    var isFocusable = index > -1 && index === latestState.activeIndex;
     var selectedItemHandleClick = function selectedItemHandleClick() {
       dispatch({
         type: SelectedItemClick,
@@ -3728,7 +3733,7 @@ function useMultipleSelection(userProps) {
       if (selectedItemNode) {
         selectedItemRefs.current.push(selectedItemNode);
       }
-    }), _extends2.tabIndex = index === latestState.activeIndex ? 0 : -1, _extends2.onClick = callAllEventHandlers(onClick, selectedItemHandleClick), _extends2.onKeyDown = callAllEventHandlers(onKeyDown, selectedItemHandleKeyDown), _extends2), rest);
+    }), _extends2.tabIndex = isFocusable ? 0 : -1, _extends2.onClick = callAllEventHandlers(onClick, selectedItemHandleClick), _extends2.onKeyDown = callAllEventHandlers(onKeyDown, selectedItemHandleKeyDown), _extends2), rest);
   }, [dispatch, latest, selectedItemKeyDownHandlers]);
   var getDropdownProps = useCallback(function (_temp2, _temp3) {
     var _extends3;