perf(Listbox): avoid collection scan when highlighting (#2912)

Author: onmax

packages/core/src/Collection/Collection.test.ts

@@ -155,6 +155,43 @@ describe('useCollection', () => {
     wrapper.unmount()
   })
 
+  it('looks up registered items by element and preserves disabled filtering', async () => {
+    const { getCollection, wrapper } = createWrapper([
+      { value: 'enabled' },
+      { value: 'disabled', disabled: true },
+    ])
+    await nextTick()
+
+    const { getItem, getItems } = getCollection()
+    const enabled = wrapper.get<HTMLElement>('[data-testid=enabled]').element
+    const disabled = wrapper.get<HTMLElement>('[data-testid=disabled]').element
+
+    expect(getItem(enabled)).toBe(getItems().find(item => item.ref === enabled))
+    expect(getItem(disabled)).toBeUndefined()
+    expect(getItem(disabled, true)).toBe(getItems(true).find(item => item.ref === disabled))
+    expect(getItem(document.createElement('div'))).toBeUndefined()
+
+    wrapper.unmount()
+  })
+
+  it('finds detached registered items but not unmounted items', async () => {
+    const { getCollection, items, wrapper } = createWrapper([{ value: 'item' }])
+    await nextTick()
+
+    const { getItem, getItems } = getCollection()
+    const element = wrapper.get<HTMLElement>('[data-testid=item]').element
+    const item = getItems()[0]
+    element.remove()
+    expect(getItem(element)).toBe(item)
+
+    wrapper.element.appendChild(element)
+    items.splice(0, 1)
+    await nextTick()
+    expect(getItem(element)).toBeUndefined()
+
+    wrapper.unmount()
+  })
+
   it('getItems() returns [] when no CollectionSlot element is mounted', async () => {
     // A provider context whose `collectionRef` is never set (no CollectionSlot
     // currentElement). `getItems()` short-circuits to `[]`.
@@ -171,6 +208,7 @@ describe('useCollection', () => {
     const wrapper = mount(Parent, { attachTo: document.body })
     await nextTick()
 
+    expect(collection.getItem(document.createElement('div'))).toBeUndefined()
     expect(collection.getItems()).toEqual([])
     expect(collection.getItems(true)).toEqual([])
     expect(collection.itemMapSize.value).toBe(0)

packages/core/src/Collection/Collection.ts

@@ -28,6 +28,14 @@ export function useCollection<ItemData = {}>(options: { key?: string, isProvider
     context = inject(injectionKey) as CollectionContext<ItemData>
   }
 
+  const getItem = (element: HTMLElement, includeDisabledItem = false) => {
+    if (!context.collectionRef.value)
+      return undefined
+
+    const item = context.itemMap.value.get(element)
+    return item && (includeDisabledItem || item.ref.dataset.disabled !== '') ? item : undefined
+  }
+
   const getItems = (includeDisabledItem = false) => {
     const collectionNode = context.collectionRef.value
     if (!collectionNode)
@@ -85,5 +93,5 @@ export function useCollection<ItemData = {}>(options: { key?: string, isProvider
   const reactiveItems = computed(() => Array.from(context.itemMap.value.values()))
   const itemMapSize = computed(() => context.itemMap.value.size)
 
-  return { getItems, reactiveItems, itemMapSize, CollectionSlot, CollectionItem }
+  return { getItems, getItem, reactiveItems, itemMapSize, CollectionSlot, CollectionItem }
 }

packages/core/src/Listbox/Listbox.test.ts

@@ -132,6 +132,47 @@ describe('given default Listbox', () => {
   })
 })
 
+describe('given a Listbox with hover highlighting', () => {
+  it('emits the highlighted item without querying the collection', async () => {
+    const wrapper = mount(ListboxRoot, {
+      attachTo: document.body,
+      props: { highlightOnHover: true },
+      slots: {
+        default: () => h(ListboxContent, null, {
+          default: () => ['first', 'second', 'third'].map(value =>
+            h(ListboxItem, { value }, () => value)),
+        }),
+      },
+    })
+    await nextTick()
+    await nextTick()
+
+    const content = wrapper.find('[role=listbox]')
+    const items = wrapper.findAll('[role=option]')
+    const querySpy = vi.spyOn(content.element, 'querySelectorAll')
+    try {
+      for (const item of items.slice(1)) {
+        await item.trigger('pointermove', { pointerType: 'mouse' })
+        expect(wrapper.emitted('highlight')?.at(-1)?.[0]).toEqual({
+          ref: item.element,
+          value: item.text(),
+        })
+        expect(item.attributes('data-highlighted')).toBe('')
+      }
+      expect(querySpy).not.toHaveBeenCalled()
+
+      const eventCount = wrapper.emitted('highlight')?.length
+      await items[2].trigger('pointermove', { pointerType: 'mouse' })
+      expect(wrapper.emitted('highlight')).toHaveLength(eventCount!)
+      expect(querySpy).not.toHaveBeenCalled()
+    }
+    finally {
+      querySpy.mockRestore()
+      wrapper.unmount()
+    }
+  })
+})
+
 describe('given a Listbox on initial mount', () => {
   let wrapper: VueWrapper<InstanceType<typeof Listbox>>
   let scrollSpy: ReturnType<typeof vi.fn>

packages/core/src/Listbox/ListboxRoot.vue

@@ -108,7 +108,7 @@ defineSlots<{
 }>()
 
 const { multiple, highlightOnHover, orientation, disabled, selectionBehavior, dir: propDir } = toRefs(props)
-const { getItems } = useCollection<{ value: T }>({ isProvider: true })
+const { getItems, getItem } = useCollection<{ value: T }>({ isProvider: true })
 const { handleTypeaheadSearch } = useTypeahead()
 const { primitiveElement, currentElement } = usePrimitiveElement()
 const kbd = useKbd()
@@ -200,7 +200,7 @@ function changeHighlight(el: HTMLElement, scrollIntoView = true, focus?: boolean
     highlightedElement.value.scrollIntoView({ block: 'nearest' })
   }
 
-  const highlightedItem = getItems().find(i => i.ref === el)
+  const highlightedItem = getItem(el)
   emits('highlight', highlightedItem)
 }