@svgrid/grid 2.2.28 → 2.2.30

package/src/row-resize.ts

@@ -81,6 +81,37 @@ export function rowResize(node: HTMLElement, opts: RowResizeOptions) {
     document.body.style.cursor = ''
   }
 
+  /**
+   * Keyboard resize (#79). The strip is `role="separator"` acting as a
+   * splitter, so it has to be reachable by Tab and respond to arrow keys.
+   * Up/Down shrink/grow the row, Shift gives a fine 1px step - the same
+   * contract the column resize handle uses (Left/Right, Shift = 1px).
+   */
+  function onKeyDown(e: KeyboardEvent) {
+    if (current.disabled) return
+    const t = e.target as HTMLElement | null
+    if (!t?.classList.contains(STRIP_CLASS)) return
+    const step = e.shiftKey ? 1 : 10
+    let delta = 0
+    if (e.key === 'ArrowUp') delta = -step
+    else if (e.key === 'ArrowDown') delta = step
+    else return
+    const tr = t.closest<HTMLTableRowElement>('tr.sv-grid-row')
+    if (!tr) return
+    const rowIndex = rowIndexOf(tr)
+    if (!Number.isFinite(rowIndex)) return
+    e.preventDefault()
+    e.stopPropagation()
+    const min = current.min ?? 20
+    const max = current.max ?? 320
+    const next = Math.round(
+      Math.max(min, Math.min(max, tr.getBoundingClientRect().height + delta)),
+    )
+    tr.style.height = `${next}px`
+    current.onResizeMove?.(rowIndex, next)
+    current.onResize(rowIndex, next)
+  }
+
   function onPointerDown(e: PointerEvent) {
     if (current.disabled) return
     const t = e.target as HTMLElement | null
@@ -134,6 +165,9 @@ export function rowResize(node: HTMLElement, opts: RowResizeOptions) {
       strip.setAttribute('role', 'separator')
       strip.setAttribute('aria-orientation', 'horizontal')
       strip.setAttribute('aria-label', 'Resize row')
+      // A separator used as an interactive splitter has to be focusable so
+      // keyboard-only users can reach it and drive `onKeyDown` (#79).
+      strip.tabIndex = 0
       // Inline the geometry + pointer-events so the strip works even
       // before SvGrid.css is parsed; the hover tint still comes from
       // the stylesheet. We keep the strip fully inside the gutter
@@ -152,6 +186,7 @@ export function rowResize(node: HTMLElement, opts: RowResizeOptions) {
   }
 
   node.addEventListener('pointerdown', onPointerDown, { capture: true })
+  node.addEventListener('keydown', onKeyDown, { capture: true })
   const observer = new MutationObserver(() => decorate())
   observer.observe(node, { childList: true, subtree: true })
   decorate()
@@ -165,6 +200,7 @@ export function rowResize(node: HTMLElement, opts: RowResizeOptions) {
     },
     destroy() {
       node.removeEventListener('pointerdown', onPointerDown, { capture: true })
+      node.removeEventListener('keydown', onKeyDown, { capture: true })
       window.removeEventListener('pointermove', onPointerMove)
       window.removeEventListener('pointerup', onPointerUp)
       observer.disconnect()

package/src/selection.ts

@@ -153,7 +153,7 @@ export function createSelection<
     ctx.grid.setActiveCell({
       rowIndex,
       colIndex,
-      cellId: getGridCellDomId("svgrid", rowIndex, colIndex),
+      cellId: getGridCellDomId(ctx.gridDomId, rowIndex, colIndex),
     });
     // Notify consumers (toolbars, ribbons) so they stay synced without
     // having to listen on the DOM. Fired on EVERY active-cell move -

package/src/svgrid.api-extensions.test.ts

@@ -309,9 +309,14 @@ describe('SvGridApi - view state (getState / setState)', () => {
 })
 
 describe('SvGridApi - click / double-click / scroll events', () => {
-  function clickCell(_target: HTMLElement, rowIndex: number, colIndex: number, type: 'click' | 'dblclick') {
-    const id = getGridCellDomId('svgrid', rowIndex, colIndex)
-    const el = document.getElementById(id)
+  function clickCell(target: HTMLElement, rowIndex: number, colIndex: number, type: 'click' | 'dblclick') {
+    // Cell ids are scoped per grid instance (#77), so resolve the base from the
+    // grid under test rather than assuming the old global "svgrid" prefix.
+    const anyCell = target.querySelector<HTMLElement>('[role="gridcell"][id]')
+    const base = anyCell?.id.replace(/_cell_\d+_\d+$/, '')
+    if (!base) throw new Error('no gridcell with an id found')
+    const id = getGridCellDomId(base, rowIndex, colIndex)
+    const el = target.querySelector<HTMLElement>(`[id="${id}"]`)
     if (!el) throw new Error(`cell ${id} not found`)
     el.dispatchEvent(new MouseEvent(type, { bubbles: true }))
   }

package/src/svgrid.cell-dom-ids.test.ts

@@ -0,0 +1,96 @@
+/**
+ * DOM: cell ids are scoped per grid instance (#77).
+ *
+ * Every cell used to be minted as `svgrid_cell_<row>_<col>`, so two grids on
+ * one page emitted the same ids. Duplicate ids break `getElementById` and made
+ * the second grid's `aria-activedescendant` point at the first grid's cell, so
+ * a screen reader announced the wrong cell.
+ */
+import { afterEach, describe, expect, it } from 'vitest'
+import { mount, unmount } from 'svelte'
+import SvGrid from './SvGrid.svelte'
+import {
+  createCoreRowModel,
+  createFilteredRowModel,
+  createPaginatedRowModel,
+  createSortedRowModel,
+  sortFns,
+  tableFeatures,
+  rowSortingFeature,
+} from './index'
+import type { ColumnDef } from './index'
+
+type Row = { id: number; name: string }
+const features = tableFeatures({ rowSortingFeature })
+const cols: ColumnDef<typeof features, Row>[] = [
+  { field: 'name', header: 'Name', width: 160 },
+]
+const data: Row[] = [
+  { id: 1, name: 'one' },
+  { id: 2, name: 'two' },
+]
+
+const tick = () => new Promise<void>((r) => queueMicrotask(r))
+
+function mountGrid() {
+  const target = document.createElement('div')
+  document.body.appendChild(target)
+  const app = mount(SvGrid, {
+    target,
+    props: {
+      data,
+      columns: cols,
+      features,
+      _rowModels: {
+        coreRowModel: createCoreRowModel(),
+        filteredRowModel: createFilteredRowModel(),
+        sortedRowModel: createSortedRowModel(sortFns),
+        paginatedRowModel: createPaginatedRowModel(),
+      },
+      containerHeight: 240,
+      virtualization: false,
+    } as never,
+  })
+  return { target, destroy: () => { unmount(app); target.remove() } }
+}
+
+const cleanups: Array<() => void> = []
+afterEach(() => {
+  while (cleanups.length) cleanups.pop()!()
+})
+
+describe('cell DOM ids', () => {
+  it('gives two grids on the same page disjoint cell ids (#77)', async () => {
+    const a = mountGrid()
+    const b = mountGrid()
+    cleanups.push(a.destroy, b.destroy)
+    await tick()
+
+    const idsOf = (root: HTMLElement) =>
+      [...root.querySelectorAll('[role="gridcell"][id]')].map((el) => el.id)
+    const aIds = idsOf(a.target)
+    const bIds = idsOf(b.target)
+
+    expect(aIds.length).toBeGreaterThan(0)
+    expect(bIds.length).toBe(aIds.length)
+    // No id appears in both grids.
+    expect(aIds.filter((id) => bIds.includes(id))).toEqual([])
+    // And every id in the document is unique.
+    const all = [...aIds, ...bIds]
+    expect(new Set(all).size).toBe(all.length)
+  })
+
+  it('points aria-activedescendant at a cell inside its own grid (#77)', async () => {
+    const a = mountGrid()
+    const b = mountGrid()
+    cleanups.push(a.destroy, b.destroy)
+    await tick()
+
+    for (const { target } of [a, b]) {
+      const grid = target.querySelector('[aria-activedescendant]')
+      expect(grid).not.toBeNull()
+      const descendantId = grid!.getAttribute('aria-activedescendant')!
+      expect(target.querySelector(`[id="${descendantId}"]`)).not.toBeNull()
+    }
+  })
+})

package/src/svgrid.conditional-stat-scope.test.ts

@@ -0,0 +1,111 @@
+/**
+ * DOM: `conditionalStatScope` decides which rows feed the min/max that
+ * `colorScale` / `dataBar` scale against (#61).
+ *
+ * The old default scanned only the current page, so the same value rendered a
+ * different bar on page 1 than on page 2. The default is now `filtered`, which
+ * ignores the page slice; `visible` keeps the old per-page behaviour for anyone
+ * who wants it.
+ */
+import { afterEach, describe, expect, it } from 'vitest'
+import { mount, unmount } from 'svelte'
+import SvGrid from './SvGrid.svelte'
+import {
+  createCoreRowModel,
+  createFilteredRowModel,
+  createPaginatedRowModel,
+  createSortedRowModel,
+  sortFns,
+  tableFeatures,
+  rowSortingFeature,
+} from './index'
+
+type Row = { id: number; v: number }
+const features = tableFeatures({ rowSortingFeature })
+const columns = [{ field: 'v', header: 'V', width: 120 }]
+
+// Page 1 spans 0..50, page 2 spans 0..100. The value 50 is the page-1 max but
+// only mid-range on page 2, so a per-page scale draws it at two different
+// widths while a filtered-wide scale draws it identically.
+const data: Row[] = [
+  { id: 1, v: 0 },
+  { id: 2, v: 50 },
+  { id: 3, v: 0 },
+  { id: 4, v: 100 },
+]
+
+const conditionalFormats = [
+  { type: 'dataBar', columns: ['v'], color: '#2563eb' },
+] as never
+
+const tick = () => new Promise<void>((r) => queueMicrotask(r))
+
+function mountGrid(props: Record<string, unknown>) {
+  const target = document.createElement('div')
+  document.body.appendChild(target)
+  const app = mount(SvGrid, {
+    target,
+    props: {
+      data,
+      columns,
+      features,
+      conditionalFormats,
+      pageable: true,
+      pageSize: 2,
+      _rowModels: {
+        coreRowModel: createCoreRowModel(),
+        filteredRowModel: createFilteredRowModel(),
+        sortedRowModel: createSortedRowModel(sortFns),
+        paginatedRowModel: createPaginatedRowModel(),
+      },
+      containerHeight: 240,
+      virtualization: false,
+      ...props,
+    } as never,
+  })
+  return { target, destroy: () => { unmount(app); target.remove() } }
+}
+
+let cleanup: (() => void) | null = null
+afterEach(() => { cleanup?.(); cleanup = null })
+
+/** Widths of the rendered data bars, in source order. */
+function barWidths(target: HTMLElement): string[] {
+  return [...target.querySelectorAll<HTMLElement>('.sv-grid-cf-bar')].map(
+    (el) => el.style.width,
+  )
+}
+
+async function nextPage(target: HTMLElement) {
+  const next = [...target.querySelectorAll<HTMLButtonElement>('button')].find(
+    (b) => /next/i.test(b.getAttribute('aria-label') ?? b.title ?? ''),
+  )
+  expect(next).toBeDefined()
+  next!.click()
+  await tick()
+}
+
+describe('conditionalStatScope', () => {
+  it('keeps the scale steady across pages by default (#61)', async () => {
+    const { target, destroy } = mountGrid({})
+    cleanup = destroy
+    await tick()
+
+    // Page 1: 0 and 50 against the full 0..100 range.
+    expect(barWidths(target)).toEqual(['0%', '50%'])
+    await nextPage(target)
+    // Page 2: 0 and 100 against the same range.
+    expect(barWidths(target)).toEqual(['0%', '100%'])
+  })
+
+  it('rescales per page under scope="visible"', async () => {
+    const { target, destroy } = mountGrid({ conditionalStatScope: 'visible' })
+    cleanup = destroy
+    await tick()
+
+    // Page 1's own max is 50, so 50 fills the bar.
+    expect(barWidths(target)).toEqual(['0%', '100%'])
+    await nextPage(target)
+    expect(barWidths(target)).toEqual(['0%', '100%'])
+  })
+})

package/src/svgrid.filter-menu-listbox.svelte.test.ts

@@ -0,0 +1,308 @@
+/**
+ * The Excel-style filter menu's value checklist is an SvListBox, not a div of
+ * checkboxes. Two things that used to bite on a high-cardinality live column
+ * (10k distinct symbols on a ticking feed):
+ *
+ *   1. every distinct value mounted a label + focusable checkbox, so the
+ *      popover held ~30k nodes and 10k tab stops;
+ *   2. the offered values were derived live, so each data tick rebuilt the
+ *      distinct-value set, re-sorted it and re-keyed the whole list.
+ *
+ * The list now windows its rows and snapshots its values when the menu opens.
+ */
+import { describe, expect, it, vi } from 'vitest'
+import { mount, unmount } from 'svelte'
+import SvGrid from './SvGrid.svelte'
+import {
+  columnFilteringFeature,
+  createCoreRowModel,
+  createFilteredRowModel,
+  createSortedRowModel,
+  rowSortingFeature,
+  sortFns,
+  splitInTokens,
+  tableFeatures,
+} from './index'
+import type { ColumnDef, SvGridApi } from './index'
+
+type Row = { id: number; symbol: string; team: string }
+const features = tableFeatures({ rowSortingFeature, columnFilteringFeature })
+
+const makeRows = (count: number, prefix = 'SYM'): Row[] =>
+  Array.from({ length: count }, (_, i) => ({
+    id: i + 1,
+    symbol: `${prefix}${String(i).padStart(5, '0')}`,
+    team: ['A', 'B', 'C'][i % 3]!,
+  }))
+
+const cols: ColumnDef<typeof features, Row>[] = [
+  { field: 'symbol', header: 'Symbol', width: 200 },
+  { field: 'team', header: 'Team', width: 160 },
+]
+const tick = () => new Promise<void>((r) => setTimeout(r))
+
+function mountGrid(data: Row[]) {
+  return new Promise<{
+    target: HTMLElement
+    api: SvGridApi<typeof features, Row>
+    setData: (next: Row[]) => void
+    destroy: () => void
+  }>((res, rej) => {
+    const target = document.createElement('div')
+    document.body.appendChild(target)
+    const props = $state({
+      data,
+      columns: cols,
+      features,
+      _rowModels: {
+        coreRowModel: createCoreRowModel(),
+        filteredRowModel: createFilteredRowModel(),
+        sortedRowModel: createSortedRowModel(sortFns),
+      },
+      rowHeight: 32,
+      containerHeight: 400,
+      virtualization: true,
+      filterMode: 'menu' as const,
+      showColumnFilters: true,
+      onApiReady(api: SvGridApi<typeof features, Row>) {
+        res({
+          target,
+          api,
+          setData: (next: Row[]) => (props.data = next),
+          destroy: () => { unmount(app); target.remove() },
+        })
+      },
+    })
+    const app = mount(SvGrid, { target, props: props as any })
+    queueMicrotask(() => { if (!target.querySelector('[role="grid"]')) rej(new Error('no grid')) })
+  })
+}
+
+/** Open the funnel popover on the first column and return the menu element. */
+async function openFilterMenu(target: HTMLElement) {
+  const btn = target.querySelector('.sv-grid-col-filter-btn') as HTMLButtonElement
+  btn.click()
+  // GridMenus is a lazy chunk; poll until the popover mounts.
+  await vi.waitFor(() => expect(target.querySelector('.sv-grid-filter-menu')).not.toBeNull())
+  return target.querySelector('.sv-grid-filter-menu') as HTMLElement
+}
+
+const optionLabels = (menu: HTMLElement) =>
+  Array.from(menu.querySelectorAll('[role="option"]')).map((el) => el.textContent?.trim() ?? '')
+
+describe('filter menu value checklist', () => {
+  it('windows a high-cardinality column instead of mounting every value', async () => {
+    const rows = makeRows(120)
+    const { target, destroy } = await mountGrid(rows)
+    await tick()
+    const menu = await openFilterMenu(target)
+
+    const list = menu.querySelector('.sv-listbox')
+    expect(list).not.toBeNull()
+    expect(list!.classList.contains('is-virtual')).toBe(true)
+
+    const rendered = menu.querySelectorAll('[role="option"]').length
+    expect(rendered).toBeGreaterThan(0)
+    expect(rendered).toBeLessThan(60)
+
+    destroy()
+  })
+
+  it('is a single tab stop, not one per value', async () => {
+    const { target, destroy } = await mountGrid(makeRows(120))
+    await tick()
+    const menu = await openFilterMenu(target)
+
+    // Roving tabindex: the listbox root is focusable, its options are not.
+    expect(menu.querySelectorAll('.sv-listbox[tabindex="0"]').length).toBe(1)
+    expect(menu.querySelectorAll('[role="option"][tabindex]').length).toBe(0)
+    // No focusable checkbox per row any more.
+    expect(menu.querySelectorAll('.sv-listbox input').length).toBe(0)
+
+    destroy()
+  })
+
+  it('keeps a short list fully rendered (no fixed-height box)', async () => {
+    const { target, destroy } = await mountGrid(makeRows(9))
+    await tick()
+    const menu = await openFilterMenu(target)
+
+    const list = menu.querySelector('.sv-listbox')!
+    expect(list.classList.contains('is-virtual')).toBe(false)
+    expect(menu.querySelectorAll('[role="option"]').length).toBe(9)
+
+    destroy()
+  })
+
+  it('snapshots the offered values, so a live data tick does not rebuild them', async () => {
+    const { target, setData, destroy } = await mountGrid(makeRows(6, 'OLD'))
+    await tick()
+    const menu = await openFilterMenu(target)
+    const before = optionLabels(menu)
+    expect(before[0]).toBe('OLD00000')
+
+    // A streaming grid replaces its row array; the open menu must not re-scan.
+    setData(makeRows(6, 'NEW'))
+    await tick()
+    expect(optionLabels(menu)).toEqual(before)
+
+    destroy()
+  })
+
+  it('re-reads the values on the next open', async () => {
+    const { target, setData, destroy } = await mountGrid(makeRows(6, 'OLD'))
+    await tick()
+    await openFilterMenu(target)
+    setData(makeRows(6, 'NEW'))
+    await tick()
+
+    // Close, then reopen: the snapshot is taken fresh.
+    ;(target.querySelector('.sv-grid-menu-backdrop') as HTMLElement).click()
+    await vi.waitFor(() => expect(target.querySelector('.sv-grid-filter-menu')).toBeNull())
+    const reopened = await openFilterMenu(target)
+    expect(optionLabels(reopened)[0]).toBe('NEW00000')
+
+    destroy()
+  })
+
+  it('unchecking a value filters the rows out', async () => {
+    const { target, api, destroy } = await mountGrid(makeRows(9))
+    await tick()
+    const menu = await openFilterMenu(target)
+
+    const first = menu.querySelector('[role="option"]') as HTMLElement
+    expect(first.getAttribute('aria-selected')).toBe('true')
+    first.click()
+    await tick()
+
+    expect(first.getAttribute('aria-selected')).toBe('false')
+    expect(api.getDisplayedRows().length).toBe(8)
+
+    destroy()
+  })
+
+  it('an in/notIn box offers a windowed checklist, not a capped datalist', async () => {
+    const { target, destroy } = await mountGrid(makeRows(300))
+    await tick()
+    const menu = await openFilterMenu(target)
+
+    const op = menu.querySelector('.sv-grid-menu-operator-select') as HTMLSelectElement
+    op.value = 'in'
+    op.dispatchEvent(new Event('change', { bubbles: true }))
+    await tick()
+
+    expect(menu.querySelector('datalist')).toBeNull()
+    const box = menu.querySelector('.sv-grid-menu-condition-value') as HTMLInputElement
+    expect(box.getAttribute('list')).toBeNull()
+
+    box.dispatchEvent(new FocusEvent('focus'))
+    await vi.waitFor(() => expect(target.querySelector('.sv-grid-in-suggest')).not.toBeNull())
+    const suggest = target.querySelector('.sv-grid-in-suggest') as HTMLElement
+
+    // Uncapped source list, windowed render.
+    expect(suggest.querySelector('.sv-listbox')!.classList.contains('is-virtual')).toBe(true)
+    expect(suggest.querySelectorAll('[role="option"]').length).toBeLessThan(60)
+
+    destroy()
+  })
+
+  it('picking a suggestion replaces the fragment being typed', async () => {
+    const { target, destroy } = await mountGrid(makeRows(9))
+    await tick()
+    const menu = await openFilterMenu(target)
+
+    const op = menu.querySelector('.sv-grid-menu-operator-select') as HTMLSelectElement
+    op.value = 'in'
+    op.dispatchEvent(new Event('change', { bubbles: true }))
+    await tick()
+
+    const box = menu.querySelector('.sv-grid-menu-condition-value') as HTMLInputElement
+    box.dispatchEvent(new FocusEvent('focus'))
+    await vi.waitFor(() => expect(target.querySelector('.sv-grid-in-suggest')).not.toBeNull())
+
+    // Commit one token, then start typing a second.
+    box.value = 'SYM00003, SYM0000'
+    box.dispatchEvent(new Event('input', { bubbles: true }))
+    await tick()
+
+    const suggest = target.querySelector('.sv-grid-in-suggest') as HTMLElement
+    expect(optionLabels(suggest).length).toBeGreaterThan(1)
+
+    // Pick another: the fragment is consumed, not left beside it.
+    const pick = Array.from(suggest.querySelectorAll('[role="option"]')).find(
+      (el) => el.textContent?.trim() === 'SYM00005',
+    ) as HTMLElement
+    pick.click()
+    await tick()
+
+    expect(splitInTokens(box.value).sort()).toEqual(['SYM00003', 'SYM00005'])
+    // ...and both read as selected straight away. A value written by the
+    // dropdown has no trailing separator, so anything that mistook the last
+    // token for a half-typed fragment would show it unchecked.
+    const checked = suggest.querySelectorAll('[role="option"][aria-selected="true"]')
+    expect(Array.from(checked).map((el) => el.textContent?.trim()).sort()).toEqual([
+      'SYM00003',
+      'SYM00005',
+    ])
+
+    destroy()
+  })
+
+  it('a value whose label contains a comma survives being picked', async () => {
+    const rows: Row[] = [
+      { id: 1, symbol: 'Aug 17, 2026', team: 'A' },
+      { id: 2, symbol: '1,234 - 5,678', team: 'B' },
+      { id: 3, symbol: 'plain', team: 'C' },
+    ]
+    const { target, api, destroy } = await mountGrid(rows)
+    await tick()
+    const menu = await openFilterMenu(target)
+
+    const op = menu.querySelector('.sv-grid-menu-operator-select') as HTMLSelectElement
+    op.value = 'in'
+    op.dispatchEvent(new Event('change', { bubbles: true }))
+    await tick()
+
+    const box = menu.querySelector('.sv-grid-menu-condition-value') as HTMLInputElement
+    box.dispatchEvent(new FocusEvent('focus'))
+    await vi.waitFor(() => expect(target.querySelector('.sv-grid-in-suggest')).not.toBeNull())
+    const suggest = target.querySelector('.sv-grid-in-suggest') as HTMLElement
+
+    const pick = Array.from(suggest.querySelectorAll('[role="option"]')).find(
+      (el) => el.textContent?.trim() === 'Aug 17, 2026',
+    ) as HTMLElement
+    pick.click()
+    await tick()
+
+    // The comma inside the value must not split it into two filter tokens.
+    expect(splitInTokens(box.value)).toEqual(['Aug 17, 2026'])
+    expect(api.getDisplayedRows().length).toBe(1)
+
+    destroy()
+  })
+
+  it('a search-hidden value stays checked when another is toggled', async () => {
+    const { target, api, destroy } = await mountGrid(makeRows(9))
+    await tick()
+    const menu = await openFilterMenu(target)
+
+    // Uncheck SYM00000 while everything is visible.
+    ;(menu.querySelector('[role="option"]') as HTMLElement).click()
+    await tick()
+    expect(api.getDisplayedRows().length).toBe(8)
+
+    // Narrow to a single value, uncheck it too. The first exclusion must
+    // survive - it is only hidden by the search box, not deselected.
+    const search = menu.querySelector('.sv-grid-menu-search') as HTMLInputElement
+    search.value = 'SYM00005'
+    search.dispatchEvent(new Event('input', { bubbles: true }))
+    await tick()
+    expect(menu.querySelectorAll('[role="option"]').length).toBe(1)
+    ;(menu.querySelector('[role="option"]') as HTMLElement).click()
+    await tick()
+
+    expect(api.getDisplayedRows().length).toBe(7)
+
+    destroy()
+  })
+})

package/src/svgrid.filter-menu-scroll.test.ts

@@ -79,7 +79,9 @@ describe('SvGrid filter menu scrolling', () => {
     await tick()
     expect(target.querySelector('.sv-grid-filter-menu')).not.toBeNull()
 
-    const facets = menu.querySelector('.sv-grid-facet-list')
+    // The value checklist is an SvListBox; under the virtualization threshold
+    // it scrolls natively, so it still emits the scroll that must be ignored.
+    const facets = menu.querySelector('.sv-listbox')
     expect(facets).not.toBeNull()
     facets!.dispatchEvent(new Event('scroll'))
     await tick()