From e4a7356e11b514cca3ba66ccf333e06f12b16e30 Mon Sep 17 00:00:00 2001 From: chirokas Date: Sat, 7 Sep 2024 21:44:11 +0800 Subject: [PATCH] fix(autocomplete): highlight item in `AutocompleteSection` during keyboard navigation --- .changeset/popular-baboons-pull.md | 5 +++++ packages/components/listbox/src/use-listbox-item.ts | 10 +++------- 2 files changed, 8 insertions(+), 7 deletions(-) create mode 100644 .changeset/popular-baboons-pull.md 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,