@operato/data-grist 10.29.4 → 10.29.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/data-grist",
-  "version": "10.29.4",
+  "version": "10.29.6",
   "description": "User interface for grid (desktop) and list (mobile)",
   "author": "heartyoh",
   "type": "module",
@@ -72,7 +72,7 @@
     "@operato/i18n": "^10.29.1",
     "@operato/input": "^10.29.1",
     "@operato/list-state": "^10.29.1",
-    "@operato/p13n": "^10.29.2",
+    "@operato/p13n": "^10.29.5",
     "@operato/popup": "^10.29.1",
     "@operato/pull-to-refresh": "^10.29.1",
     "@operato/styles": "^10.29.1",
@@ -116,5 +116,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "a04ca15b0eb25ed0657c8525e0ba3deb835e8270"
+  "gitHead": "4ce15fe4cf60d6bb6810ec86f5eb9839298001a2"
 }

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

@@ -0,0 +1,120 @@
+/* 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'
+
+/**
+ * A cell keeps what its renderer draws inside its column.
+ *
+ * `FieldRenderer` may return a plain string, and the cell rendered it as a bare text node. Only
+ * `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.
+ *
+ *   [measured] operato-office contract list — body 5503 / header 3830 (2026-10-04)
+ *
+ * The long cells sit in the last column, because only content that runs past the last track widens
+ * the body; in a middle column the next cell paints over it and the defect hides.
+ */
+
+const LONG = '긴 글자가 열 너비를 넘는다 '.repeat(40)
+
+const settle = (ms = 150) => new Promise(resolve => setTimeout(resolve, ms))
+
+type Root = HTMLElement & { renderRoot: ShadowRoot; updateComplete: Promise<unknown> }
+
+async function grid(renderer: (value: unknown) => unknown) {
+  const config = {
+    columns: [
+      { type: 'string', name: 'id', hidden: true },
+      { type: 'string', name: 'name', header: 'name', width: 120 },
+      { type: 'string', name: 'note', header: 'note', width: 160, record: { renderer } }
+    ],
+    pagination: { pages: [20] }
+  }
+
+  const el = (await fixture(html`
+    <ox-grist
+      style="width: 400px; height: 300px"
+      mode="GRID"
+      .config=${config}
+      .fetchHandler=${async () => ({
+        total: 2,
+        records: [
+          { id: '1', name: 'a', note: LONG },
+          { id: '2', name: 'b', note: LONG }
+        ]
+      })}
+    ></ox-grist>
+  `)) as Root & { fetch(): Promise<void> }
+
+  await el.fetch()
+  await settle()
+  await el.updateComplete
+
+  const grist = el.renderRoot.querySelector('#grist') as Root
+  const header = grist.renderRoot.querySelector('ox-grid-header') as Root
+  const body = grist.renderRoot.querySelector('ox-grid-body') as Root
+  await body.updateComplete
+
+  const notes = Array.from(body.renderRoot.querySelectorAll('ox-grid-field')).filter(
+    f => (f as any).column?.name === 'note'
+  ) as Root[]
+
+  return { header, body, notes }
+}
+
+describe('a grid cell keeps its content inside its column', () => {
+  /* 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
+  })
+
+  const renderers: [string, (value: unknown) => unknown][] = [
+    ['a plain string', value => String(value)],
+    ['an <a>', value => html`<a href="#">${value}</a>`]
+  ]
+
+  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)
+
+      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)
+    })
+
+    it(`${kind}: the cell is as wide as its column and clips what does not fit`, async () => {
+      const { notes } = await grid(renderer)
+
+      for (const note of notes) {
+        expect(Math.round(note.getBoundingClientRect().width)).to.equal(160)
+        expect(getComputedStyle(note).overflowX).to.equal('hidden')
+      }
+    })
+  }
+
+  it('a plain string still ends in an ellipsis', async () => {
+    const { notes } = await grid(value => String(value))
+
+    const text = notes[0].renderRoot.querySelector('span') as HTMLElement | null
+    expect(!!text, 'the string sits in a box that can take text-overflow').to.equal(true)
+    expect(getComputedStyle(text!).textOverflow).to.equal('ellipsis')
+    expect(text!.clientWidth).to.be.lessThan(160)
+  })
+})