diff --git a/src/components/BaseSelect/useHighlightedIndex.ts b/src/components/BaseSelect/useHighlightedIndex.ts index 754c591a..255024c8 100644 --- a/src/components/BaseSelect/useHighlightedIndex.ts +++ b/src/components/BaseSelect/useHighlightedIndex.ts @@ -1,9 +1,4 @@ -import { - useCombobox as useDownshiftCombobox, - useSelect as useDownshiftSelect, - UseComboboxStateChange, - UseSelectStateChange, -} from "downshift"; +import { UseComboboxStateChange, UseSelectStateChange } from "downshift"; import { useEffect, useState } from "react"; import { Option } from "~/components/BaseSelect"; @@ -26,49 +21,24 @@ export function useHighlightedIndex( // Or when we change selected item useEffect(() => { // If we don't have selected item leave highlighted index as -1 - if (!selectedItem) { + if (!selectedItem || highlightedIndex !== -1) { return; } // Find highlighted index in items to select base on selected item value // If there is no match, leave highlighted index as -1 setHighlightedIndex(getIndexToHighlight(items, selectedItem)); - }, [items, selectedItem]); + }, [highlightedIndex, items, selectedItem]); const handleHighlightedIndexChange = ({ - type, highlightedIndex, }: UseComboboxStateChange | UseSelectStateChange) => { - switch (type) { - // Restore highlighted index to -1 when input value is changed and there is no selected item - case useDownshiftCombobox.stateChangeTypes.InputChange: - setHighlightedIndex(!selectedItem ? -1 : highlightedIndex); - break; - - // Restore highlighted index to last selected item when leaving menu - case useDownshiftCombobox.stateChangeTypes.MenuMouseLeave: - case useDownshiftSelect.stateChangeTypes.MenuMouseLeave: - setHighlightedIndex( - selectedItem - ? getIndexToHighlight(items, selectedItem) - : highlightedIndex - ); - break; - case useDownshiftCombobox.stateChangeTypes.ItemClick: - case useDownshiftSelect.stateChangeTypes.ItemClick: - case useDownshiftCombobox.stateChangeTypes.ItemMouseMove: - case useDownshiftSelect.stateChangeTypes.ItemMouseMove: - case useDownshiftCombobox.stateChangeTypes.InputKeyDownArrowUp: - case useDownshiftSelect.stateChangeTypes.ToggleButtonKeyDownArrowDown: - case useDownshiftSelect.stateChangeTypes.ToggleButtonKeyDownArrowUp: - setHighlightedIndex(highlightedIndex); - break; - case useDownshiftCombobox.stateChangeTypes.InputKeyDownArrowDown: - if (selectedItem && highlightedIndex === -1) { - setHighlightedIndex(getIndexToHighlight(items, selectedItem)); - } else { - setHighlightedIndex(highlightedIndex); - } + if (!highlightedIndex) { + setHighlightedIndex( + selectedItem ? getIndexToHighlight(items, selectedItem) : -1 + ); + } else { + setHighlightedIndex(highlightedIndex); } }; diff --git a/src/components/Combobox/Common/useCombobox.tsx b/src/components/Combobox/Common/useCombobox.tsx index 581dbe1f..73c6743c 100644 --- a/src/components/Combobox/Common/useCombobox.tsx +++ b/src/components/Combobox/Common/useCombobox.tsx @@ -66,7 +66,7 @@ export const useCombobox = ({ selectedItem, highlightedIndex, onHighlightedIndexChange, - isItemDisabled: (item) => item.disabled ?? false, + isItemDisabled: (item) => item?.disabled ?? false, onStateChange: ({ inputValue: newInputValue, type }) => { switch (type) { case useDownshiftCombobox.stateChangeTypes.InputChange: