@svgrid/grid 2.6.21 → 2.7.0

package/src/number-editor-literal.test.ts

@@ -0,0 +1,84 @@
+/**
+ * Typing a decimal into an `editorType: 'number'` cell.
+ *
+ * `<input type="number">` applies the HTML value-sanitization algorithm: the
+ * element only reports a value it can parse as a valid floating-point number.
+ * Every intermediate state on the way to "12.5" - "12." - is not one, so the
+ * element reports "" and the keystroke vanishes. The same applies to a lone
+ * "-" on the way to a negative, and to "1e" on the way to "1e3".
+ *
+ * jsdom implements that sanitization, so this is reproducible here rather than
+ * only in a browser.
+ */
+import { describe, expect, it } from 'vitest'
+import {
+  getCellEditorInputType,
+  getEditorInputType,
+  isNumericEditorInput,
+} from './SvGrid.helpers'
+
+describe('what a bare number input does to intermediate values', () => {
+  // This is the browser behaviour the editor has to work around, pinned so the
+  // reasoning below cannot quietly stop being true.
+  const sanitized = (raw: string) => {
+    const el = document.createElement('input')
+    el.type = 'number'
+    el.value = raw
+    return el.value
+  }
+
+  it('throws away a trailing decimal point', () => {
+    expect(sanitized('12.')).toBe('')
+  })
+
+  it('throws away a lone minus sign', () => {
+    expect(sanitized('-')).toBe('')
+  })
+
+  it('throws away a half-typed exponent', () => {
+    expect(sanitized('1e')).toBe('')
+  })
+
+  it('keeps values that are already valid', () => {
+    expect(sanitized('12.5')).toBe('12.5')
+    expect(sanitized('-3')).toBe('-3')
+    expect(sanitized('1e3')).toBe('1e3')
+  })
+})
+
+describe('getCellEditorInputType', () => {
+  it('does NOT hand the number editor a type=number input', () => {
+    // The whole point: a text input keeps the raw keystrokes, and the value is
+    // coerced at commit by parseEditorValue - which the editor already did.
+    expect(getCellEditorInputType('number')).toBe('text')
+  })
+
+  it('leaves every other editor on its native input type', () => {
+    for (const t of ['text', 'date', 'datetime', 'time', 'password', 'color'] as const) {
+      expect(getCellEditorInputType(t), t).toBe(getEditorInputType(t))
+    }
+  })
+
+  it('does not change the FILTER inputs, which share the other helper', () => {
+    // The filter row and filter menu still ask getEditorInputType. They have
+    // the same defect, but changing them is a separate decision - this pins
+    // that they were not swept along by accident.
+    expect(getEditorInputType('number')).toBe('number')
+  })
+})
+
+describe('isNumericEditorInput', () => {
+  it('accepts every state on the way to a number', () => {
+    // Rejecting these is the exact bug this replaces.
+    for (const v of ['', '-', '12', '12.', '12.5', '-3', '.5', '1e', '1e3', '1e-3']) {
+      expect(isNumericEditorInput(v), JSON.stringify(v)).toBe(true)
+    }
+  })
+
+  it('rejects what can never become a number', () => {
+    // The guarantee type="number" used to provide, now that it is gone.
+    for (const v of ['abc', '12x', '12..5', '--3', '1 2', '12,5']) {
+      expect(isNumericEditorInput(v), JSON.stringify(v)).toBe(false)
+    }
+  })
+})

package/src/number-editor.grid.test.ts

@@ -0,0 +1,160 @@
+/**
+ * End-to-end: typing a decimal into an `editorType: 'number'` cell keeps every
+ * keystroke, and the value still commits as a NUMBER.
+ *
+ * The unit half of this lives in `number-editor-literal.test.ts` - the browser
+ * sanitization that caused it, and the helpers that route around it. This
+ * drives the real editor, which is what actually regressed for users: typing
+ * "12.5" produced 125, because the "." was dropped and the digits ran together.
+ */
+import { describe, expect, it, vi } from 'vitest'
+import { mount, unmount } from 'svelte'
+import SvGrid from './SvGrid.svelte'
+import { createCoreRowModel, tableFeatures } from './index'
+import type { ColumnDef, SvGridApi } from './index'
+
+type Row = { id: number; label: string; amount: number }
+const features = tableFeatures({})
+const cols: ColumnDef<typeof features, Row>[] = [
+  { field: 'label', header: 'Label', width: 160 },
+  { field: 'amount', header: 'Amount', width: 140, editorType: 'number' },
+]
+
+function mountGrid() {
+  return new Promise<{
+    api: SvGridApi<typeof features, Row>
+    target: HTMLElement
+    changes: Array<{ newValue: unknown }>
+    destroy: () => void
+  }>((res, rej) => {
+    const target = document.createElement('div')
+    document.body.appendChild(target)
+    const changes: Array<{ newValue: unknown }> = []
+    const app = mount(SvGrid, {
+      target,
+      props: {
+        data: [{ id: 1, label: 'One', amount: 5 }],
+        columns: cols,
+        features,
+        _rowModels: { coreRowModel: createCoreRowModel() },
+        getRowId: (r: Row) => String(r.id),
+        containerHeight: 200,
+        virtualization: false,
+        editable: true,
+        onCellValueChange: (e: { newValue: unknown }) => changes.push(e),
+        onApiReady(api: SvGridApi<typeof features, Row>) {
+          res({ api, target, changes, destroy: () => { unmount(app); target.remove() } })
+        },
+      } as any,
+    })
+    queueMicrotask(() => { if (!target.querySelector('[role="grid"]')) rej(new Error('no grid')) })
+  })
+}
+
+/** Start editing the amount cell and return its input, once the lazy chunk lands. */
+async function editAmount(api: SvGridApi<typeof features, Row>, target: HTMLElement) {
+  api.startEditing(0, 'amount')
+  await vi.waitFor(() => {
+    expect(target.querySelector('.sv-grid-cell-editing input')).not.toBeNull()
+  })
+  return target.querySelector('.sv-grid-cell-editing input') as HTMLInputElement
+}
+
+/** Type `text` one character at a time, as a user does. */
+function typeInto(input: HTMLInputElement, text: string) {
+  let sofar = ''
+  for (const ch of text) {
+    sofar += ch
+    input.value = sofar
+    input.dispatchEvent(new Event('input', { bubbles: true }))
+    // Read back what survived - the element may have rewritten it.
+    sofar = input.value
+  }
+  return input.value
+}
+
+describe('number editor - decimals survive being typed', () => {
+  it('keeps the trailing decimal point mid-entry', async () => {
+    const { api, target, destroy } = await mountGrid()
+    try {
+      const input = await editAmount(api, target)
+      // The bug: with type="number" this read back "" and the dot was gone.
+      expect(typeInto(input, '12.')).toBe('12.')
+    } finally {
+      destroy()
+    }
+  })
+
+  it('commits 12.5 as the number 12.5, not 125', async () => {
+    const { api, target, changes, destroy } = await mountGrid()
+    try {
+      const input = await editAmount(api, target)
+      typeInto(input, '12.5')
+      input.dispatchEvent(new Event('blur', { bubbles: true }))
+
+      await vi.waitFor(() => expect(changes.length).toBeGreaterThan(0))
+      expect(changes.at(-1)!.newValue).toBe(12.5)
+      expect(typeof changes.at(-1)!.newValue).toBe('number')
+    } finally {
+      destroy()
+    }
+  })
+
+  it('keeps a lone minus sign on the way to a negative', async () => {
+    const { api, target, changes, destroy } = await mountGrid()
+    try {
+      const input = await editAmount(api, target)
+      expect(typeInto(input, '-')).toBe('-')
+      typeInto(input, '-4.25')
+      input.dispatchEvent(new Event('blur', { bubbles: true }))
+
+      await vi.waitFor(() => expect(changes.length).toBeGreaterThan(0))
+      expect(changes.at(-1)!.newValue).toBe(-4.25)
+    } finally {
+      destroy()
+    }
+  })
+
+  it('carries the mobile decimal keypad hint', async () => {
+    // Losing type="number" also loses the numeric soft keyboard, which is what
+    // inputmode restores.
+    const { api, target, destroy } = await mountGrid()
+    try {
+      const input = await editAmount(api, target)
+      expect(input.getAttribute('type')).toBe('text')
+      expect(input.getAttribute('inputmode')).toBe('decimal')
+    } finally {
+      destroy()
+    }
+  })
+
+  it('refuses characters that can never be part of a number', async () => {
+    // type="number" used to block these; a text input does not, so the editor
+    // has to. Without the guard "12x" would reach the commit and coerce to null.
+    const { api, target, destroy } = await mountGrid()
+    try {
+      const input = await editAmount(api, target)
+      typeInto(input, '12')
+      input.value = '12x'
+      input.dispatchEvent(new Event('input', { bubbles: true }))
+      expect(input.value).toBe('12')
+    } finally {
+      destroy()
+    }
+  })
+
+  it('leaves a text column alone', async () => {
+    const { api, target, destroy } = await mountGrid()
+    try {
+      api.startEditing(0, 'label')
+      await vi.waitFor(() => {
+        expect(target.querySelector('.sv-grid-cell-editing input')).not.toBeNull()
+      })
+      const input = target.querySelector('.sv-grid-cell-editing input') as HTMLInputElement
+      expect(input.getAttribute('inputmode')).toBeNull()
+      expect(typeInto(input, 'hello.')).toBe('hello.')
+    } finally {
+      destroy()
+    }
+  })
+})

package/src/overlays.test.ts

@@ -1,90 +1,90 @@
-/**
- * Component tests for the overlay trio: SvModal (dialog semantics, Escape /
- * backdrop close), SvPopover (click open + outside close) and SvTooltip
- * (focus-triggered, aria-describedby wiring).
- */
-import { describe, expect, it, vi, afterEach } from 'vitest'
-import { mount, unmount, flushSync, createRawSnippet } from 'svelte'
-import SvModal from './SvModal.svelte'
-import SvPopover from './SvPopover.svelte'
-import SvTooltip from './SvTooltip.svelte'
-
-const body = createRawSnippet(() => ({ render: () => `<p class="body">hello</p>` }))
-const anchorBtn = createRawSnippet(() => ({ render: () => `<button class="anchor">open</button>` }))
-
-function mountC(Comp: any, props: Record<string, unknown>) {
-  const target = document.createElement('div')
-  document.body.appendChild(target)
-  const app = mount(Comp, { target, props: props as any })
-  flushSync()
-  return { target, destroy: () => { unmount(app); target.remove() } }
-}
-afterEach(() => {
-  document.querySelectorAll('.sv-modal__backdrop, .sv-pop__panel, .sv-tip').forEach((n) => n.remove())
-})
-
-describe('SvModal', () => {
-  it('renders a labelled modal dialog when open', () => {
-    const { destroy } = mountC(SvModal, { open: true, title: 'Edit', children: body })
-    try {
-      const dialog = document.querySelector<HTMLElement>('.sv-modal')!
-      expect(dialog.getAttribute('role')).toBe('dialog')
-      expect(dialog.getAttribute('aria-modal')).toBe('true')
-      const titleId = dialog.getAttribute('aria-labelledby')!
-      expect(document.getElementById(titleId)!.textContent).toBe('Edit')
-      expect(document.querySelector('.sv-modal .body')!.textContent).toBe('hello')
-    } finally { destroy() }
-  })
-
-  it('Escape and the close button both fire onClose', () => {
-    let closed = 0
-    const { destroy } = mountC(SvModal, { open: true, title: 'X', onClose: () => (closed++), children: body })
-    try {
-      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }))
-      flushSync()
-      expect(closed).toBe(1)
-    } finally { destroy() }
-  })
-})
-
-describe('SvPopover', () => {
-  it('opens the panel on anchor click and closes on outside pointerdown', () => {
-    const { target, destroy } = mountC(SvPopover, { anchor: anchorBtn, children: body })
-    try {
-      expect(document.querySelector('.sv-pop__panel')).toBeNull()
-      target.querySelector<HTMLElement>('.anchor')!.click()
-      flushSync()
-      const panel = document.querySelector<HTMLElement>('.sv-pop__panel')!
-      expect(panel).not.toBeNull()
-      expect(panel.getAttribute('role')).toBe('dialog')
-      // Outside click closes.
-      document.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
-      flushSync()
-      expect(document.querySelector('.sv-pop__panel')).toBeNull()
-    } finally { destroy() }
-  })
-})
-
-describe('SvTooltip', () => {
-  it('shows after the delay on focus and wires aria-describedby', () => {
-    vi.useFakeTimers()
-    try {
-      const child = createRawSnippet(() => ({ render: () => `<button class="t">i</button>` }))
-      const { target, destroy } = mountC(SvTooltip, { text: 'Tip text', delay: 200, children: child })
-      const anchor = target.querySelector<HTMLElement>('.sv-tip__anchor')!
-      anchor.dispatchEvent(new FocusEvent('focusin', { bubbles: true }))
-      vi.advanceTimersByTime(210)
-      flushSync()
-      const tip = document.querySelector<HTMLElement>('.sv-tip')!
-      expect(tip).not.toBeNull()
-      expect(tip.getAttribute('role')).toBe('tooltip')
-      expect(anchor.getAttribute('aria-describedby')).toBe(tip.id)
-      // The wrapper span is never itself focusable, so AT users only ever land
-      // on the real interactive child below - it must carry the description
-      // too, or it's never announced on focus (see SvTooltip.svelte effect).
-      const focusEl = target.querySelector<HTMLElement>('.t')!
-      expect(focusEl.getAttribute('aria-describedby')).toBe(tip.id)
-      destroy()
-    } finally { vi.useRealTimers() }
-  })
-})
+/**
+ * Component tests for the overlay trio: SvModal (dialog semantics, Escape /
+ * backdrop close), SvPopover (click open + outside close) and SvTooltip
+ * (focus-triggered, aria-describedby wiring).
+ */
+import { describe, expect, it, vi, afterEach } from 'vitest'
+import { mount, unmount, flushSync, createRawSnippet } from 'svelte'
+import SvModal from './SvModal.svelte'
+import SvPopover from './SvPopover.svelte'
+import SvTooltip from './SvTooltip.svelte'
+
+const body = createRawSnippet(() => ({ render: () => `<p class="body">hello</p>` }))
+const anchorBtn = createRawSnippet(() => ({ render: () => `<button class="anchor">open</button>` }))
+
+function mountC(Comp: any, props: Record<string, unknown>) {
+  const target = document.createElement('div')
+  document.body.appendChild(target)
+  const app = mount(Comp, { target, props: props as any })
+  flushSync()
+  return { target, destroy: () => { unmount(app); target.remove() } }
+}
+afterEach(() => {
+  document.querySelectorAll('.sv-modal__backdrop, .sv-pop__panel, .sv-tip').forEach((n) => n.remove())
+})
+
+describe('SvModal', () => {
+  it('renders a labelled modal dialog when open', () => {
+    const { destroy } = mountC(SvModal, { open: true, title: 'Edit', children: body })
+    try {
+      const dialog = document.querySelector<HTMLElement>('.sv-modal')!
+      expect(dialog.getAttribute('role')).toBe('dialog')
+      expect(dialog.getAttribute('aria-modal')).toBe('true')
+      const titleId = dialog.getAttribute('aria-labelledby')!
+      expect(document.getElementById(titleId)!.textContent).toBe('Edit')
+      expect(document.querySelector('.sv-modal .body')!.textContent).toBe('hello')
+    } finally { destroy() }
+  })
+
+  it('Escape and the close button both fire onClose', () => {
+    let closed = 0
+    const { destroy } = mountC(SvModal, { open: true, title: 'X', onClose: () => (closed++), children: body })
+    try {
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }))
+      flushSync()
+      expect(closed).toBe(1)
+    } finally { destroy() }
+  })
+})
+
+describe('SvPopover', () => {
+  it('opens the panel on anchor click and closes on outside pointerdown', () => {
+    const { target, destroy } = mountC(SvPopover, { anchor: anchorBtn, children: body })
+    try {
+      expect(document.querySelector('.sv-pop__panel')).toBeNull()
+      target.querySelector<HTMLElement>('.anchor')!.click()
+      flushSync()
+      const panel = document.querySelector<HTMLElement>('.sv-pop__panel')!
+      expect(panel).not.toBeNull()
+      expect(panel.getAttribute('role')).toBe('dialog')
+      // Outside click closes.
+      document.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
+      flushSync()
+      expect(document.querySelector('.sv-pop__panel')).toBeNull()
+    } finally { destroy() }
+  })
+})
+
+describe('SvTooltip', () => {
+  it('shows after the delay on focus and wires aria-describedby', () => {
+    vi.useFakeTimers()
+    try {
+      const child = createRawSnippet(() => ({ render: () => `<button class="t">i</button>` }))
+      const { target, destroy } = mountC(SvTooltip, { text: 'Tip text', delay: 200, children: child })
+      const anchor = target.querySelector<HTMLElement>('.sv-tip__anchor')!
+      anchor.dispatchEvent(new FocusEvent('focusin', { bubbles: true }))
+      vi.advanceTimersByTime(210)
+      flushSync()
+      const tip = document.querySelector<HTMLElement>('.sv-tip')!
+      expect(tip).not.toBeNull()
+      expect(tip.getAttribute('role')).toBe('tooltip')
+      expect(anchor.getAttribute('aria-describedby')).toBe(tip.id)
+      // The wrapper span is never itself focusable, so AT users only ever land
+      // on the real interactive child below - it must carry the description
+      // too, or it's never announced on focus (see SvTooltip.svelte effect).
+      const focusEl = target.querySelector<HTMLElement>('.t')!
+      expect(focusEl.getAttribute('aria-describedby')).toBe(tip.id)
+      destroy()
+    } finally { vi.useRealTimers() }
+  })
+})