fix(Listbox): include disabled and focusable in ListboxItem v-memo deps (#2653)

zernonia · web-flow · commit bf1f9e3be2be · 2026-05-22T12:55:55.000+08:00
The `v-memo` on `ListboxItem` only listed `[isHighlighted, isSelected]`, but the cached VNode also reads `disabled` (for both the `disabled` and `data-disabled` attributes) and `rootContext.focusable.value` (for the `tabindex` ternary). Because `v-memo` skips re-render when none of its listed deps change, toggling `disabled` at runtime left the DOM stale until something else also flipped the highlight or selection. Since `Listbox.getCollectionItem()` filters the navigable collection by reading `dataset.disabled` from the live DOM, the stale attribute caused disabled items to keep participating in keyboard navigation — which in Combobox surfaced as ArrowDown "snapping back" to the originally selected item. Closes #2644
diff --git a/packages/core/src/Listbox/Listbox.test.ts b/packages/core/src/Listbox/Listbox.test.ts
@@ -2,9 +2,10 @@ import type { DOMWrapper, VueWrapper } from '@vue/test-utils'
 import { mount } from '@vue/test-utils'
 import { afterAll, beforeEach, describe, expect, it, vi } from 'vitest'
 import { axe } from 'vitest-axe'
-import { nextTick } from 'vue'
+import { defineComponent, h, nextTick, ref } from 'vue'
 import { useKbd } from '@/shared'
 import { handleSubmit } from '@/test'
+import { ListboxItem, ListboxRoot } from '.'
 import Listbox from './story/_Listbox.vue'
 
 describe('given default Listbox', () => {
@@ -319,6 +320,45 @@ describe('given horizontal Listbox', () => {
   })
 })
 
+// Regression test for https://github.com/unovue/reka-ui/issues/2644
+// `v-memo` on ListboxItem must invalidate when `disabled` (or
+// `rootContext.focusable.value`) changes, otherwise `data-disabled` / `disabled`
+// attributes go stale and the item still participates in keyboard navigation.
+describe('given ListboxItem with reactive `disabled` prop', () => {
+  it('should update DOM attributes when `disabled` toggles without highlight/selection change', async () => {
+    const isDisabled = ref(false)
+    const ReactiveDisabledListbox = defineComponent({
+      setup() {
+        return () =>
+          h(ListboxRoot, null, {
+            default: () => [
+              h(ListboxItem, { value: { id: 1 }, disabled: isDisabled.value }, () => 'toggleable'),
+              h(ListboxItem, { value: { id: 2 } }, () => 'other'),
+            ],
+          })
+      },
+    })
+
+    const wrapper = mount(ReactiveDisabledListbox, { attachTo: document.body })
+    const items = wrapper.findAll('[role=option]')
+
+    expect(items[0].attributes('data-disabled')).toBeUndefined()
+    expect(items[0].attributes('disabled')).toBeUndefined()
+
+    isDisabled.value = true
+    await nextTick()
+
+    expect(items[0].attributes('data-disabled')).toBe('')
+    expect(items[0].attributes('disabled')).toBe('')
+
+    isDisabled.value = false
+    await nextTick()
+
+    expect(items[0].attributes('data-disabled')).toBeUndefined()
+    expect(items[0].attributes('disabled')).toBeUndefined()
+  })
+})
+
 describe('given Listbox in a form', async () => {
   let items: DOMWrapper<Element>[]
 
diff --git a/packages/core/src/Listbox/ListboxItem.vue b/packages/core/src/Listbox/ListboxItem.vue
@@ -76,7 +76,7 @@ provideListboxItemContext({
       :id="id"
       v-bind="$attrs"
       :ref="forwardRef"
-      v-memo="[isHighlighted, isSelected]"
+      v-memo="[isHighlighted, isSelected, disabled, rootContext.focusable.value]"
       role="option"
       :tabindex="rootContext.focusable.value ? isHighlighted ? '0' : '-1' : -1"
       :aria-selected="isSelected"
