fix(popover): single hover-follows highlight without stealing input focus (UAT)
Second UAT finding on the tag popover: the keyboard-active row stayed put while a fainter CSS :hover chased the pointer — two competing highlights. Root cause: floating-ui's focusItemOnHover is (correctly) OFF for input-hosting menus because setting its activeIndex on hover drags DOM focus onto the item and blurs the create-tag input mid-typing; the only pointer feedback left was the item's own `hover:bg-*`. Fix, applied in the shared PopoverItem so it's general: - Drive the visible highlight off a NEW `hoverIndex` state (highlightIndex = hoverIndex ?? activeIndex), decoupled from floating-ui's activeIndex — hovering sets only hoverIndex, never DOM focus, so one highlight follows the pointer AND the input keeps its caret. Keyboard nav (onNavigate/onMatch) clears hoverIndex so it takes the highlight back; leaving the menu clears it too. - Split PopoverItem's `active` into focusActive (roving tabindex, keyboard) vs visualActive (data-active highlight). - Remove the now-redundant `hover:bg-*` from the 5 consumers so data-active is the sole highlight (it was also a same-specificity tie with data-active). Verified in-browser: hovering moves the single highlight; typing "testtag" in the create field then hovering items keeps focus+caret on the input (caretPos intact); mouse-leave returns the highlight to the keyboard row. Gate: tsc/eslint/prettier/ vitest 79 green.
This commit is contained in:
@@ -78,7 +78,7 @@ export default function LanguageSwitcher({
|
||||
setOpen(false);
|
||||
}}
|
||||
label={l.label}
|
||||
className="w-full flex items-center justify-between gap-2 text-sm px-2 py-2 rounded-lg text-muted outline-hidden transition hover:text-fg hover:bg-card"
|
||||
className="w-full flex items-center justify-between gap-2 text-sm px-2 py-2 rounded-lg text-muted outline-hidden transition hover:text-fg"
|
||||
>
|
||||
<span>{l.label}</span>
|
||||
{l.code === value && <Check className="w-4 h-4 text-accent" />}
|
||||
|
||||
Reference in New Issue
Block a user