diff --git a/.changeset/popular-baboons-pull.md b/.changeset/popular-baboons-pull.md new file mode 100644 index 0000000000..4575aa8bb0 --- /dev/null +++ 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 index ac23c21aed..f4e0781644 100644 --- 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(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,