@operato/data-grist 10.29.6 → 10.29.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/data-grist",
-  "version": "10.29.6",
+  "version": "10.29.8",
   "description": "User interface for grid (desktop) and list (mobile)",
   "author": "heartyoh",
   "type": "module",
@@ -116,5 +116,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "4ce15fe4cf60d6bb6810ec86f5eb9839298001a2"
+  "gitHead": "7afbba99cf2119ccb709b6cb0cff8b58d447ef88"
 }

package/test/accessible-name.test.ts

@@ -348,8 +348,9 @@ describe('grouped header spans two rows', () => {
  * wrapper. Two things then depend on this structure:
  *
  * ```
- * column layout      the host is a flex column. A wrapper that generates a box swallows header
- *                    and body into one flex item, and the body's flex: 1 stops working
+ * column layout      the host is a flex column. The wrapper is itself a flex column (it is the one
+ *                    scroller that header and body share), so the body still takes the height
+ *                    left under the header
  * sibling selector   "show the settings button on header hover" is an adjacent-sibling rule, so
  *                    the button has to sit directly after the wrapper
  * ```
@@ -378,7 +379,7 @@ describe('grid wrapper stays out of the layout', () => {
     expect(grid.nextElementSibling, 'adjacent-sibling rule no longer holds').to.equal(setting)
   })
 
-  it('leaves header and body as flex items of the host', async () => {
+  it('lays header and body out as a column that fills the host', async () => {
     const el: any = await fixture(html`
       <div style="height: 300px; display: flex">
         <ox-grid
@@ -396,7 +397,8 @@ describe('grid wrapper stays out of the layout', () => {
     const header = grid.renderRoot.querySelector('ox-grid-header') as HTMLElement
     const body = grid.renderRoot.querySelector('ox-grid-body') as HTMLElement
 
-    expect(getComputedStyle(wrapper).display).to.equal('contents')
+    expect(getComputedStyle(wrapper).display).to.equal('flex')
+    expect(getComputedStyle(wrapper).flexDirection).to.equal('column')
 
     /* The body takes the remaining height; a wrapper with a box shrinks it to header height. */
     expect(body.offsetHeight, 'body does not take the remaining height').to.be.greaterThan(100)

package/test/field-contains-content.test.ts

@@ -11,7 +11,8 @@ import '../src/data-grist.js'
  * `span` and `pre` were clipped, so a long string — or an `<a>` — spilled past its track. The body's
  * scrollWidth grew past the header's (the header is just the sum of the column widths): at the far
  * right the header stopped while the body kept scrolling, and stray text showed where there were no
- * columns.
+ * columns. Header and body now share one scroller, so the overflow shows as the grid scrolling past
+ * its last column instead.
  *
  *   [measured] operato-office contract list — body 5503 / header 3830 (2026-10-04)
  *
@@ -55,6 +56,7 @@ async function grid(renderer: (value: unknown) => unknown) {
   await el.updateComplete
 
   const grist = el.renderRoot.querySelector('#grist') as Root
+  const scroller = grist.renderRoot.querySelector('div[grid]') as HTMLElement
   const header = grist.renderRoot.querySelector('ox-grid-header') as Root
   const body = grist.renderRoot.querySelector('ox-grid-body') as Root
   await body.updateComplete
@@ -63,7 +65,7 @@ async function grid(renderer: (value: unknown) => unknown) {
     f => (f as any).column?.name === 'note'
   ) as Root[]
 
-  return { header, body, notes }
+  return { scroller, header, body, notes }
 }
 
 describe('a grid cell keeps its content inside its column', () => {
@@ -92,11 +94,14 @@ describe('a grid cell keeps its content inside its column', () => {
   ]
 
   for (const [kind, renderer] of renderers) {
-    it(`${kind}: the body scrolls exactly as far as the header`, async () => {
-      const { header, body, notes } = await grid(renderer)
+    it(`${kind}: the grid scrolls exactly as far as its columns reach`, async () => {
+      const { scroller, header, body, notes } = await grid(renderer)
 
       expect(notes.length, 'the long cells must be drawn, or this measures nothing').to.be.at.least(2)
-      expect(body.scrollWidth, 'content past the last column widens only the body').to.equal(header.scrollWidth)
+      expect(body.offsetWidth, 'header and body span the same width').to.equal(header.offsetWidth)
+      expect(scroller.scrollWidth, 'content past the last column scrolls on into empty space').to.equal(
+        header.offsetWidth
+      )
     })
 
     it(`${kind}: the cell is as wide as its column and clips what does not fit`, async () => {

package/test/first-click-stays.test.ts

@@ -0,0 +1,101 @@
+/* Elements are compared by presence, not by value: a failing element comparison makes chai render the DOM and hang the runner. */
+import { expect, fixture } from '@open-wc/testing'
+import { resetMouse, sendMouse } from '@web/test-runner-commands'
+import { html } from 'lit'
+
+import '../src/data-grist.js'
+
+/**
+ * The first cell you click stays where you clicked it.
+ *
+ * Clicking a cell sets the new focus and calls focus() at once, before the body has drawn that
+ * focus. The input buffer that takes the focus was still where it had never been placed (top left),
+ * and the browser scrolled the grid to show it. Then the grid scrolled the focused cell back into
+ * view — at the far edge. A cell clicked in the middle of a grid pushed 1000px to the right ended up
+ * at the right edge (0, then 581). From the second click on the buffer sat near the last cell, so it
+ * only showed the first time.
+ *
+ * The grid scrolls its own focus into view, so focusing the buffer must not scroll.
+ */
+
+type Root = HTMLElement & { renderRoot: ShadowRoot; updateComplete: Promise<unknown> }
+
+const settle = (ms = 150) => new Promise(resolve => setTimeout(resolve, ms))
+
+describe('the first click on a scrolled grid', () => {
+  const ignoreResizeLoop = (e: ErrorEvent) => {
+    if (String(e.message).includes('ResizeObserver loop')) {
+      e.stopImmediatePropagation()
+      e.preventDefault()
+    }
+  }
+  let previousOnError: OnErrorEventHandler = null
+  before(() => {
+    window.addEventListener('error', ignoreResizeLoop, true)
+    previousOnError = window.onerror
+    window.onerror = (message, ...rest) =>
+      String(message).includes('ResizeObserver loop') ? true : previousOnError?.call(window, message, ...rest)
+  })
+  after(async function () {
+    /* resetMouse is a round trip to the browser driver; under a full parallel run it takes seconds. */
+    this.timeout(10000)
+    /* Let the resize that the last layout queued arrive while the filter is still in place. */
+    await settle(300)
+    window.removeEventListener('error', ignoreResizeLoop, true)
+    window.onerror = previousOnError
+    await resetMouse()
+  })
+
+  it('does not move the grid when the clicked cell is already in view', async function () {
+    this.timeout(10000)
+    const columns: any[] = [
+      { type: 'gutter', gutterName: 'sequence' },
+      { type: 'string', name: 'id', hidden: true },
+      { type: 'string', name: 'code', header: 'code', width: 140, record: { editable: true } }
+    ]
+    for (let i = 0; i < 30; i++) {
+      columns.push({ type: 'string', name: 'c' + i, header: 'col ' + i, width: 120, record: { editable: true } })
+    }
+    const records = Array.from({ length: 30 }, (_, r) => {
+      const record: any = { id: String(r), code: 'C-' + r }
+      for (let i = 0; i < 30; i++) record['c' + i] = `v${r}-${i}`
+      return record
+    })
+
+    const el = (await fixture(html`
+      <ox-grist
+        style="display: flex; width: 700px; height: 360px"
+        mode="GRID"
+        .config=${{ columns, pagination: { pages: [100] } }}
+        .fetchHandler=${async () => ({ total: records.length, records })}
+      ></ox-grist>
+    `)) as Root & { fetch(): Promise<void> }
+    await el.fetch()
+    await settle()
+
+    const grist = el.renderRoot.querySelector('#grist') as Root
+    const scroller = grist.renderRoot.querySelector('div[grid]') as HTMLElement
+    const body = grist.renderRoot.querySelector('ox-grid-body') as Root
+    await body.updateComplete
+
+    scroller.scrollLeft = 1000
+    await settle(50)
+    expect(scroller.scrollLeft, 'the grid must scroll, or this measures nothing').to.equal(1000)
+
+    /* A cell in the middle of the view, in the third row. */
+    const row = body.renderRoot.querySelectorAll('div[grid-row]')[2] as HTMLElement
+    const view = scroller.getBoundingClientRect()
+    const cell = (Array.from(row.querySelectorAll('ox-grid-field')) as HTMLElement[]).find(f => {
+      const r = f.getBoundingClientRect()
+      return r.left > view.left + 200 && r.right < view.right - 200
+    })!
+    const before = cell.getBoundingClientRect()
+
+    await sendMouse({ type: 'click', position: [Math.round(before.left + 20), Math.round(before.top + before.height / 2)] })
+    await settle()
+
+    expect(cell.hasAttribute('focused'), 'the clicked cell takes the focus').to.equal(true)
+    expect(scroller.scrollLeft, 'the grid moved under the pointer').to.equal(1000)
+    expect(Math.round(cell.getBoundingClientRect().left)).to.equal(Math.round(before.left))
+  })
+})

package/test/grid-single-scroller.test.ts

@@ -0,0 +1,150 @@
+/* Elements are compared by presence, not by value: a failing element comparison makes chai render the DOM and hang the runner. */
+import { expect, fixture } from '@open-wc/testing'
+import { html } from 'lit'
+
+import '../src/data-grist.js'
+
+/**
+ * Header and body move as one.
+ *
+ * The body used to be its own scroller, and the header a second scroller that copied the body's
+ * scrollLeft from its scroll event (and the other way round). Three things went wrong:
+ *
+ * ```
+ * gap      the compositor moves the body at once; the header only moves after the main thread
+ *          handles the event, so on a busy screen it trails by several frames
+ * shake    the sync ran both ways, so a late header event put the body back one frame
+ * the end  when the two scroll widths differ, the header stops while the body goes on
+ * ```
+ *
+ * Now the role=grid box is the only scroller. The header sticks to its top and the body does not
+ * scroll. Nothing copies a position, so nothing can trail or pull back.
+ */
+
+type Root = HTMLElement & { renderRoot: ShadowRoot; updateComplete: Promise<unknown> }
+
+const settle = (ms = 150) => new Promise(resolve => setTimeout(resolve, ms))
+
+async function grid() {
+  const columns: any[] = [
+    { type: 'gutter', gutterName: 'sequence' },
+    { type: 'string', name: 'id', hidden: true },
+    { type: 'string', name: 'code', header: 'code', width: 120, fixed: true }
+  ]
+  for (let i = 0; i < 12; i++) {
+    columns.push({ type: 'string', name: 'c' + i, header: 'col ' + i, width: 110 })
+  }
+
+  const records = Array.from({ length: 60 }, (_, r) => {
+    const record: any = { id: String(r), code: 'C-' + r }
+    for (let i = 0; i < 12; i++) record['c' + i] = `v${r}-${i}`
+    return record
+  })
+
+  const el = (await fixture(html`
+    <ox-grist
+      style="width: 600px; height: 320px"
+      mode="GRID"
+      .config=${{ columns, pagination: { pages: [100] } }}
+      .fetchHandler=${async () => ({ total: records.length, records })}
+    ></ox-grist>
+  `)) as Root & { fetch(): Promise<void> }
+
+  await el.fetch()
+  await settle()
+  await el.updateComplete
+
+  const grist = el.renderRoot.querySelector('#grist') as Root & { focused?: { row: number; column: number } }
+  const scroller = grist.renderRoot.querySelector('div[grid]') as HTMLElement
+  const header = grist.renderRoot.querySelector('ox-grid-header') as Root
+  const body = grist.renderRoot.querySelector('ox-grid-body') as Root
+  await body.updateComplete
+
+  return { grist, scroller, header, body }
+}
+
+/** The largest horizontal distance between a column's header cell and its cell in the first row. */
+function misalignment(header: Root, body: Root) {
+  const heads = Array.from(header.renderRoot.querySelectorAll('[role=columnheader]')) as HTMLElement[]
+  const row = body.renderRoot.querySelector('div[grid-row]') as HTMLElement
+  const cells = Array.from(row.querySelectorAll('ox-grid-field')) as HTMLElement[]
+  const n = Math.min(heads.length, cells.length)
+
+  let worst = 0
+  for (let i = 0; i < n; i++) {
+    worst = Math.max(worst, Math.abs(heads[i].getBoundingClientRect().left - cells[i].getBoundingClientRect().left))
+  }
+  return { n, worst }
+}
+
+describe('grid header and body share one scroller', () => {
+  /* Resizing the grid body inside a fixture trips Chrome's benign "ResizeObserver loop" error. */
+  const ignoreResizeLoop = (e: ErrorEvent) => {
+    if (String(e.message).includes('ResizeObserver loop')) {
+      e.stopImmediatePropagation()
+      e.preventDefault()
+    }
+  }
+  let previousOnError: OnErrorEventHandler = null
+  before(() => {
+    window.addEventListener('error', ignoreResizeLoop, true)
+    previousOnError = window.onerror
+    window.onerror = (message, ...rest) =>
+      String(message).includes('ResizeObserver loop') ? true : previousOnError?.call(window, message, ...rest)
+  })
+  after(() => {
+    window.removeEventListener('error', ignoreResizeLoop, true)
+    window.onerror = previousOnError
+  })
+
+  it('neither the header nor the body scrolls on its own', async () => {
+    const { scroller, header, body } = await grid()
+
+    expect(scroller.scrollWidth, 'the grid must overflow, or this measures nothing').to.be.greaterThan(
+      scroller.clientWidth
+    )
+    expect(getComputedStyle(body).overflowX).to.equal('visible')
+    expect(getComputedStyle(header).overflowX).to.equal('visible')
+    expect(header.offsetWidth, 'header and body span the same width').to.equal(body.offsetWidth)
+  })
+
+  for (const where of ['start', 'middle', 'end'] as const) {
+    it(`every column lines up with its header at the ${where}`, async () => {
+      const { scroller, header, body } = await grid()
+
+      const max = scroller.scrollWidth - scroller.clientWidth
+      scroller.scrollLeft = where === 'start' ? 0 : where === 'middle' ? Math.round(max / 2) : max
+      await settle(50)
+
+      const { n, worst } = misalignment(header, body)
+      expect(n, 'columns must be drawn, or this measures nothing').to.be.greaterThan(10)
+      expect(worst).to.equal(0)
+    })
+  }
+
+  it('the header stays on top when the rows scroll', async () => {
+    const { scroller, header } = await grid()
+
+    scroller.scrollTop = 600
+    await settle(50)
+
+    expect(scroller.scrollTop, 'the rows must scroll, or this measures nothing').to.be.greaterThan(0)
+    expect(header.getBoundingClientRect().top).to.equal(scroller.getBoundingClientRect().top)
+  })
+
+  it('a focused row that was under the header is brought out below it', async () => {
+    const { grist, scroller, header, body } = await grid()
+
+    scroller.scrollTop = 600
+    await settle(50)
+
+    grist.focused = { row: 2, column: 3 }
+    await grist.updateComplete
+    await body.updateComplete
+    await settle(50)
+
+    const focused = body.renderRoot.querySelector('ox-grid-field[focused]') as HTMLElement
+    expect(!!focused, 'a cell must take the focus').to.equal(true)
+    expect(focused.getBoundingClientRect().top).to.be.at.least(header.getBoundingClientRect().bottom - 1)
+  })
+})