downshift 8.3.2 → 8.4.0

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

@@ -13,7 +13,8 @@ declare function getA11yStatusMessage<Item>({ isOpen, resultCount, previousResul
 export declare const defaultProps: {
     getA11yStatusMessage: typeof getA11yStatusMessage;
     isItemDisabled(): boolean;
-    itemToString: (item: any) => string;
+    itemToString(item: any): string;
+    itemToKey(item: any): any;
     stateReducer: (s: Object, a: Object) => Object;
     getA11ySelectionMessage: (selectionParameters: Object) => string;
     scrollIntoView: typeof import("../../utils").scrollIntoView;

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

@@ -44,7 +44,8 @@ export function getDefaultValue(props: any, propKey: any, defaultStateValues?: {
     inputValue: string;
 }): any;
 export namespace defaultProps {
-    export { itemToString };
+    export function itemToString(item: any): string;
+    export function itemToKey(item: any): any;
     export { stateReducer };
     export { getA11ySelectionMessage };
     export { scrollIntoView };
@@ -156,8 +157,8 @@ export namespace commonDropdownPropTypes {
         Node: PropTypes.Validator<(...args: any[]) => any>;
     }>>;
     export { environment_1 as environment };
-    const itemToString_1: PropTypes.Requireable<(...args: any[]) => any>;
-    export { itemToString_1 as itemToString };
+    export const itemToString: PropTypes.Requireable<(...args: any[]) => any>;
+    export const itemToKey: PropTypes.Requireable<(...args: any[]) => any>;
     const stateReducer_1: PropTypes.Requireable<(...args: any[]) => any>;
     export { stateReducer_1 as stateReducer };
 }
@@ -168,7 +169,6 @@ export namespace commonPropTypes { }
 export function useIsInitialMount(): boolean;
 import { noop } from "../utils";
 import React from "react";
-declare function itemToString(item: any): string;
 /**
  * Default state reducer that returns the changes.
  *

package/package.json

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

@@ -1562,8 +1562,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." : '';
 }
 
 /**
@@ -1633,9 +1633,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);
 }
@@ -1714,7 +1711,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,
@@ -1751,7 +1753,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
@@ -1760,7 +1764,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) {
@@ -1775,7 +1780,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;
@@ -2034,6 +2041,7 @@ var commonPropTypes = {
     Node: PropTypes__default["default"].func.isRequired
   }),
   itemToString: PropTypes__default["default"].func,
+  itemToKey: PropTypes__default["default"].func,
   stateReducer: PropTypes__default["default"].func
 };
 
@@ -2236,7 +2244,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,
@@ -2838,13 +2848,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
@@ -2861,9 +2879,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;
@@ -3507,6 +3522,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,
@@ -3621,7 +3637,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;
         }
@@ -3705,8 +3723,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,
@@ -3730,7 +3750,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/preact/dist/downshift.esm.js

@@ -1549,8 +1549,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." : '';
 }
 
 /**
@@ -1620,9 +1620,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);
 }
@@ -1701,7 +1698,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,
@@ -1738,7 +1740,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
@@ -1747,7 +1751,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) {
@@ -1762,7 +1767,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;
@@ -2021,6 +2028,7 @@ var commonPropTypes = {
     Node: PropTypes.func.isRequired
   }),
   itemToString: PropTypes.func,
+  itemToKey: PropTypes.func,
   stateReducer: PropTypes.func
 };
 
@@ -2223,7 +2231,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,
@@ -2825,13 +2835,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
@@ -2848,9 +2866,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;
@@ -3494,6 +3509,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,
@@ -3608,7 +3624,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;
         }
@@ -3692,8 +3710,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,
@@ -3717,7 +3737,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/preact/dist/downshift.umd.js

@@ -1831,8 +1831,8 @@
    */
   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." : '';
   }
 
   /**
@@ -1902,9 +1902,6 @@
     }
     return [item, index];
   }
-  function itemToString(item) {
-    return item ? String(item) : '';
-  }
   function isAcceptedCharacterKey(key) {
     return /^\S{1}$/.test(key);
   }
@@ -1983,7 +1980,12 @@
     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,
@@ -2020,7 +2022,9 @@
     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
@@ -2029,7 +2033,8 @@
   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) {
@@ -2044,7 +2049,9 @@
       return defaultHighlightedIndex;
     }
     if (selectedItem) {
-      return items.indexOf(selectedItem);
+      return items.findIndex(function (item) {
+        return itemToKey(selectedItem) === itemToKey(item);
+      });
     }
     if (offset === 0) {
       return -1;
@@ -2303,6 +2310,7 @@
       Node: PropTypes__default["default"].func.isRequired
     }),
     itemToString: PropTypes__default["default"].func,
+    itemToKey: PropTypes__default["default"].func,
     stateReducer: PropTypes__default["default"].func
   };
 
@@ -2536,7 +2544,9 @@
         {
           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,
@@ -3138,13 +3148,21 @@
       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
@@ -3161,9 +3179,6 @@
     };
   }
   var defaultProps$1 = _extends({}, defaultProps$3, {
-    selectedItemChanged: function selectedItemChanged(prevItem, item) {
-      return prevItem !== item;
-    },
     getA11yStatusMessage: getA11yStatusMessage$1,
     isItemDisabled: function isItemDisabled() {
       return false;
@@ -3807,6 +3822,7 @@
   });
   var defaultProps = {
     itemToString: defaultProps$3.itemToString,
+    itemToKey: defaultProps$3.itemToKey,
     stateReducer: defaultProps$3.stateReducer,
     environment: defaultProps$3.environment,
     getA11yRemovalMessage: getA11yRemovalMessage,
@@ -3921,7 +3937,9 @@
       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;
           }
@@ -4005,8 +4023,10 @@
         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,
@@ -4030,7 +4050,8 @@
       } 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