fix(Listbox): restore highlightOnHover behavior (#2558)

zernonia · claude · web-flow · commit ffde59ca6434 · 2026-04-01T17:20:23.000+08:00
* fix(Listbox): restore highlightOnHover behavior broken by focusable guard The pointermove handler in ListboxItem incorrectly gated highlighting on `!focusable.value`, but focusable is always `true`, so highlightOnHover never triggered. Add an optional `focus` parameter to `changeHighlight` and pass `false` on hover to update the highlight without stealing DOM focus. Fixes #2556 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * fix(Listbox): guard collection.at(-1) against undefined Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * fix(Listbox): replace .at(-1) with index-based last element access Disable unicorn/prefer-at ESLint rule to avoid auto-revert. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * fix(Listbox): replace .at(-1) with index-based last element access Disable e18e/prefer-array-at ESLint rule to prevent auto-revert. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * chore: revert eslint prefer-at overrides, restore .at(-1) usage Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * fix(Listbox): read focusable.value inside changeHighlight instead of as default param Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * fix(Listbox): guard collection[0] against undefined for kbd.HOME Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> --------- Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
diff --git a/packages/core/src/Listbox/ListboxItem.vue b/packages/core/src/Listbox/ListboxItem.vue
@@ -92,8 +92,8 @@ provideListboxItemContext({
         if (rootContext.highlightedElement.value === currentElement)
           return
 
-        if (rootContext.highlightOnHover.value && !rootContext.focusable.value)
-          rootContext.changeHighlight(currentElement, false)
+        if (rootContext.highlightOnHover.value)
+          rootContext.changeHighlight(currentElement, false, false)
       }"
     >
       <slot />
diff --git a/packages/core/src/Listbox/ListboxRoot.vue b/packages/core/src/Listbox/ListboxRoot.vue
@@ -27,7 +27,7 @@ type ListboxRootContext<T> = {
 
   onLeave: (event: Event) => void
   onEnter: (event: Event) => void
-  changeHighlight: (el: HTMLElement, scrollIntoView?: boolean) => void
+  changeHighlight: (el: HTMLElement, scrollIntoView?: boolean, focus?: boolean) => void
   onKeydownNavigation: (event: KeyboardEvent) => void
   onKeydownEnter: (event: KeyboardEvent) => void
   onKeydownTypeAhead: (event: KeyboardEvent) => void
@@ -157,12 +157,12 @@ function getCollectionItem() {
   return getItems().map(i => i.ref).filter(i => i.dataset.disabled !== '')
 }
 
-function changeHighlight(el: HTMLElement, scrollIntoView = true) {
+function changeHighlight(el: HTMLElement, scrollIntoView = true, focus?: boolean) {
   if (!el)
     return
 
   highlightedElement.value = el
-  if (focusable.value)
+  if (focus ?? focusable.value)
     highlightedElement.value.focus()
   if (scrollIntoView)
     highlightedElement.value.scrollIntoView({ block: 'nearest' })
@@ -211,7 +211,9 @@ function onKeydownTypeAhead(event: KeyboardEvent) {
       const values = collection.map(i => i.value)
       modelValue.value = [...values]
       event.preventDefault()
-      changeHighlight(collection[collection.length - 1].ref)
+      const lastItem = collection.at(-1)
+      if (lastItem)
+        changeHighlight(lastItem.ref)
     }
     else if (!isMetaKey) {
       const el = handleTypeaheadSearch(event.key, getItems())
@@ -309,9 +311,9 @@ function handleMultipleReplace(event: KeyboardEvent, targetEl: HTMLElement) {
     let lastValue = collection.find(i => i.ref === targetEl)?.value
 
     if (event.key === kbd.END)
-      lastValue = collection[collection.length - 1].value
+      lastValue = collection.at(-1)?.value
     else if (event.key === kbd.HOME)
-      lastValue = collection[0].value
+      lastValue = collection[0]?.value
 
     if (!lastValue || !firstValue.value)
       return
