From 72e950938475cdda9b1cc0b67e80870618829665 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Chy=C5=82a?= <pawel.chyla@saleor.io>
Date: Mon, 19 Aug 2024 23:09:42 +0200
Subject: [PATCH] Revert useHighlightedIndex and check log

---
 src/components/BaseSelect/useHighlightedIndex.ts |  3 +++
 src/components/Combobox/Common/useCombobox.tsx   | 13 +++++++------
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/components/BaseSelect/useHighlightedIndex.ts b/src/components/BaseSelect/useHighlightedIndex.ts
index 1b1f4322..c3579bac 100644
--- 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
index fb7a0290..581dbe1f 100644
--- 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) {