@operato/data-grist 10.29.7 → 10.29.8

package/package.json

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

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))
+  })
+})