Revert useHighlightedIndex and check log

saleor · Aug 19, 2024 · 72e9509 · 72e9509
1 parent d4b0cb5
commit 72e9509
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 6 deletions.
diff --git a/src/components/BaseSelect/useHighlightedIndex.ts b/src/components/BaseSelect/useHighlightedIndex.ts
@@ -32,6 +32,7 @@ export function useHighlightedIndex<T extends Option>(
 
     // Find highlighted index in items to select base on selected item value
     // If there is no match, leave highlighted index as -1
+    console.log('Has selected', selectedItem);
     setHighlightedIndex(getIndexToHighlight(items, selectedItem));
   }, [items, selectedItem]);
 
@@ -69,8 +70,10 @@ function getIndexToHighlight<T extends Option>(
   selectedItem: T
 ): number {
   if (typeof selectedItem === "string") {
+    console.log(items, selectedItem, items.findIndex((item) => item.value === selectedItem));
     return items.findIndex((item) => item.value === selectedItem);
   }
+  console.log(items, selectedItem, items.findIndex((item) => item.value === selectedItem?.value));
 
   return items.findIndex((item) => item.value === selectedItem?.value);
 }
diff --git a/src/components/Combobox/Common/useCombobox.tsx b/src/components/Combobox/Common/useCombobox.tsx
@@ -8,7 +8,7 @@ import { FocusEvent, useState } from "react";
 import {
   Option,
   SingleChangeHandler,
-  // useHighlightedIndex,
+  useHighlightedIndex,
 } from "~/components/BaseSelect";
 
 const getItemsFilter = <T extends Option>(
@@ -48,10 +48,10 @@ export const useCombobox = <T extends Option, V extends string | Option>({
   const typed = Boolean(selectedItem || active || inputValue);
 
   const itemsToSelect = getItemsFilter<T>(inputValue, options);
-  // const { highlightedIndex, onHighlightedIndexChange } = useHighlightedIndex(
-  //   itemsToSelect,
-  //   selectedItem
-  // );
+  const { highlightedIndex, onHighlightedIndexChange } = useHighlightedIndex(
+    itemsToSelect,
+    selectedItem
+  );
 
   const {
     isOpen,
@@ -60,11 +60,12 @@ export const useCombobox = <T extends Option, V extends string | Option>({
     getMenuProps,
     getInputProps: _getInputProps,
     getItemProps,
-    highlightedIndex,
   } = useDownshiftCombobox({
     items: itemsToSelect,
     itemToString: (item) => item?.label ?? "",
     selectedItem,
+    highlightedIndex,
+    onHighlightedIndexChange,
     isItemDisabled: (item) => item.disabled ?? false,
     onStateChange: ({ inputValue: newInputValue, type }) => {
       switch (type) {