fix(autocomplete): highlight item in AutocompleteSection during key…

…board navigation (#3726)
nextui-org · Sep 7, 2024 · d621b29 · d621b29
1 parent 985c2e1
commit d621b29
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 7 deletions.
diff --git a/.changeset/popular-baboons-pull.md b/.changeset/popular-baboons-pull.md
@@ -0,0 +1,5 @@
+---
+"@nextui-org/listbox": patch
+---
+
+Fix item highlighting in `AutocompleteSection` during keyboard navigation (#3713)
diff --git a/packages/components/listbox/src/use-listbox-item.ts b/packages/components/listbox/src/use-listbox-item.ts
@@ -109,13 +109,9 @@ export function useListboxItem<T extends object>(originalProps: UseListboxItemPr
     itemProps = removeEvents(itemProps);
   }
 
-  const isHighlighted = useMemo(() => {
-    if (shouldHighlightOnFocus && isFocused) {
-      return true;
-    }
-
-    return isMobile ? isHovered || isPressed : isHovered;
-  }, [isHovered, isPressed, isFocused, isMobile, shouldHighlightOnFocus]);
+  const isHighlighted =
+    (shouldHighlightOnFocus && isFocused) ||
+    (isMobile ? isHovered || isPressed : isHovered || (isFocused && !isFocusVisible));
 
   const getItemProps: PropGetter = (props = {}) => ({
     ref: domRef,