fix(vtable): update nested fields by path

common/changes/@visactor/vtable/fix-issue-4186-nested-field-update_2026-09-04-10-30.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "fix: update nested fields by path",
+      "type": "patch",
+      "packageName": "@visactor/vtable"
+    }
+  ],
+  "packageName": "@visactor/vtable",
+  "email": "biukam.w@gmail.com"
+}

packages/vtable/__tests__/data-update/listTable-nested-field-update.test.ts

@@ -0,0 +1,124 @@
+// @ts-nocheck
+import { ListTable } from '../../src';
+import { createDiv } from '../dom';
+
+describe('ListTable nested field updates', () => {
+  test('updates a nested field and reports its old and changed values', () => {
+    const field = 'facts.2025-02.qty';
+    const records = [{ facts: { '2025-02': { qty: 10 } } }];
+    const table = new ListTable({
+      container: createDiv(),
+      columns: [{ field, title: 'Quantity' }],
+      records
+    });
+    const events: any[] = [];
+    table.on('change_cell_value', event => events.push(event));
+
+    table.changeCellValueByRecord(0, field, '12', { autoRefresh: false });
+
+    expect(records[0].facts['2025-02'].qty).toBe(12);
+    expect(events).toHaveLength(1);
+    expect(events[0]).toMatchObject({
+      col: 0,
+      row: 1,
+      recordIndex: 0,
+      field,
+      rawValue: 10,
+      currentValue: 10,
+      changedValue: 12
+    });
+    table.release();
+  });
+
+  test('updates nested fields in a batch change and reports the aggregate event', () => {
+    const field = 'facts.2025-02.qty';
+    const records = [{ facts: { '2025-02': { qty: 10 } } }];
+    const table = new ListTable({
+      container: createDiv(),
+      columns: [{ field, title: 'Quantity' }],
+      records
+    });
+    const cellEvents: any[] = [];
+    const batchEvents: any[] = [];
+    table.on('change_cell_value', event => cellEvents.push(event));
+    table.on('change_cell_values', event => batchEvents.push(event));
+
+    table.changeCellValuesByRecords([{ recordIndex: 0, field, value: '12' }], { autoRefresh: false });
+
+    expect(records[0].facts['2025-02'].qty).toBe(12);
+    expect(cellEvents).toHaveLength(1);
+    expect(cellEvents[0].changedValue).toBe(12);
+    expect(batchEvents).toHaveLength(1);
+    expect(batchEvents[0].values).toEqual(cellEvents);
+    table.release();
+  });
+
+  test('updates an array field path and reports its old and changed values', () => {
+    const field = ['facts', '2025-02', 'qty'];
+    const records = [{ facts: { '2025-02': { qty: 10 } } }];
+    const table = new ListTable({
+      container: createDiv(),
+      columns: [{ field, title: 'Quantity' }],
+      records
+    });
+    const events: any[] = [];
+    table.on('change_cell_value', event => events.push(event));
+
+    table.changeCellValueByRecord(0, [...field], '12', { autoRefresh: false });
+
+    expect(records[0].facts['2025-02'].qty).toBe(12);
+    expect(events).toHaveLength(1);
+    expect(events[0]).toMatchObject({
+      col: 0,
+      recordIndex: 0,
+      rawValue: 10,
+      currentValue: 10,
+      changedValue: 12
+    });
+    table.release();
+  });
+
+  test('matches copied array fields when resolving a custom sort function', () => {
+    const field = ['facts', 'qty'];
+    const orderFn = jest.fn();
+    const table = new ListTable({
+      container: createDiv(),
+      columns: [{ field, title: 'Quantity', sort: orderFn }],
+      records: [{ facts: { qty: 10 } }]
+    });
+
+    expect(table._getSortFuncFromHeaderOption(undefined, [...field])).toBe(orderFn);
+    table.release();
+  });
+
+  test('reports stored values when updates create records', () => {
+    const field = ['facts', 'qty'];
+    const records: any[] = [];
+    const table = new ListTable({
+      container: createDiv(),
+      columns: [{ field, title: 'Quantity' }],
+      records
+    });
+    const cellEvents: any[] = [];
+    const batchEvents: any[] = [];
+    table.on('change_cell_value', event => cellEvents.push(event));
+    table.on('change_cell_values', event => batchEvents.push(event));
+    table.dataSource.beforeChangedRecordsMap.set('0', { facts: { qty: 0 } });
+
+    table.changeCellValueByRecord(0, [...field], '12', {
+      autoRefresh: false,
+      noTriggerChangeCellValuesEvent: true
+    });
+
+    expect(records[0].facts.qty).toBe(12);
+    expect(cellEvents[0].changedValue).toBe(12);
+
+    table.dataSource.beforeChangedRecordsMap.set('1', { facts: { qty: 0 } });
+    table.changeCellValuesByRecords([{ recordIndex: 1, field: [...field], value: '14' }], { autoRefresh: false });
+
+    expect(records[1].facts.qty).toBe(14);
+    expect(cellEvents[1].changedValue).toBe(14);
+    expect(batchEvents[0].values).toEqual([cellEvents[1]]);
+    table.release();
+  });
+});

packages/vtable/__tests__/data/data-source-nested-field-update.test.ts

@@ -0,0 +1,164 @@
+// @ts-nocheck
+import { DataSource, getField, getRecordFieldValue } from '../../src/data/DataSource';
+
+describe('DataSource nested field updates', () => {
+  test('updates a dotted field path by record index', () => {
+    const records = [{ facts: { '2025-02': { qty: 10 } } }];
+    const dataSource = new DataSource({ records });
+
+    dataSource.changeFieldValueByRecordIndex('18', 0, 'facts.2025-02.qty');
+
+    expect(records[0].facts['2025-02'].qty).toBe(18);
+    expect(records[0]['facts.2025-02.qty']).toBeUndefined();
+    dataSource.release();
+  });
+
+  test('updates an array field path by record index', () => {
+    const records = [{ facts: { '2025-02': { qty: 10 } } }];
+    const field = ['facts', '2025-02', 'qty'];
+    const dataSource = new DataSource({ records });
+
+    dataSource.changeFieldValueByRecordIndex('18', 0, field);
+
+    expect(records[0].facts['2025-02'].qty).toBe(18);
+    expect(records[0]['facts,2025-02,qty']).toBeUndefined();
+    dataSource.release();
+  });
+
+  test('updates an array field path through the view-index write path', () => {
+    const records = [{ facts: { '2025-02': { qty: 10 } } }];
+    const field = ['facts', '2025-02', 'qty'];
+    const dataSource = new DataSource({ records });
+
+    dataSource.changeFieldValue('18', 0, field);
+
+    expect(records[0].facts['2025-02'].qty).toBe(18);
+    expect(records[0]['facts,2025-02,qty']).toBeUndefined();
+    dataSource.release();
+  });
+
+  test('keeps array paths distinct from comma-delimited literal keys', () => {
+    const records = [{ facts: { '2025-02': { qty: 10 } }, 'facts,2025-02,qty': 11 }];
+    const field = ['facts', '2025-02', 'qty'];
+    const dataSource = new DataSource({ records });
+    const table = { leftRowSeriesNumberCount: 0 } as any;
+
+    dataSource.changeFieldValueByRecordIndex(18, 0, field);
+
+    expect(records[0].facts['2025-02'].qty).toBe(18);
+    expect(records[0]['facts,2025-02,qty']).toBe(11);
+    expect(getRecordFieldValue(records[0], field)).toBe(18);
+    expect(getField(records[0], field, 0, 0, table, () => undefined)).toBe(18);
+    dataSource.release();
+  });
+
+  test('updates a dotted field path through the view-index write path', () => {
+    const records = [{ facts: { '2025-02': { qty: 10 } } }];
+    const dataSource = new DataSource({ records });
+
+    dataSource.changeFieldValue('18', 0, 'facts.2025-02.qty');
+
+    expect(records[0].facts['2025-02'].qty).toBe(18);
+    expect(records[0]['facts.2025-02.qty']).toBeUndefined();
+    dataSource.release();
+  });
+
+  test('creates missing objects while updating a dotted field path', () => {
+    const records = [{}];
+    const dataSource = new DataSource({ records });
+
+    dataSource.changeFieldValueByRecordIndex(18, 0, 'facts.2025-02.qty');
+
+    expect(records[0]).toEqual({ facts: { '2025-02': { qty: 18 } } });
+    dataSource.release();
+  });
+
+  test('prefers an existing literal dotted field over path traversal', () => {
+    const records = [{ facts: { '2025-02': { qty: 10 } }, 'facts.2025-02.qty': 11 }];
+    const dataSource = new DataSource({ records });
+
+    dataSource.changeFieldValueByRecordIndex(18, 0, 'facts.2025-02.qty');
+
+    expect(records[0]['facts.2025-02.qty']).toBe(18);
+    expect(records[0].facts['2025-02'].qty).toBe(10);
+    dataSource.release();
+  });
+
+  test('does not mutate inherited objects while creating a nested field path', () => {
+    const inherited = { facts: { '2025-02': { qty: 10 } } };
+    const record = Object.create(inherited);
+    const dataSource = new DataSource({ records: [record] });
+
+    dataSource.changeFieldValueByRecordIndex(18, 0, 'facts.2025-02.qty');
+
+    expect(record).toHaveProperty('facts', { '2025-02': { qty: 18 } });
+    expect(inherited.facts['2025-02'].qty).toBe(10);
+    dataSource.release();
+  });
+
+  test('recognizes nested fields in hasField', () => {
+    const records = [{ facts: { '2025-02': { qty: 10 } } }];
+    const dataSource = new DataSource({ records });
+
+    expect(dataSource.hasField(0, 'facts.2025-02.qty')).toBe(true);
+    dataSource.release();
+  });
+
+  test('recognizes numeric fields in array records', () => {
+    const records = [[10, 20]];
+    const dataSource = new DataSource({ records });
+
+    expect(dataSource.hasField(0, 0)).toBe(true);
+    expect(dataSource.hasField(0, 1)).toBe(true);
+    expect(dataSource.hasField(0, 2)).toBe(false);
+    dataSource.release();
+  });
+
+  test('keeps array-path reads aligned when an intermediate value is falsy', () => {
+    const table = { leftRowSeriesNumberCount: 0 } as any;
+    const record = {
+      nested: {
+        zero: 0,
+        disabled: false,
+        empty: ''
+      }
+    };
+
+    for (const key of ['zero', 'disabled', 'empty']) {
+      const field = ['nested', key, 'missing'];
+      expect(getRecordFieldValue(record, field)).toBeUndefined();
+      expect(getField(record, field, 0, 0, table, () => undefined)).toBeUndefined();
+    }
+  });
+
+  test('writes a literal __proto__ field without changing the record prototype', () => {
+    const record = {};
+    const dataSource = new DataSource({ records: [record] });
+
+    dataSource.changeFieldValueByRecordIndex('safe', 0, '__proto__');
+
+    expect(Object.getPrototypeOf(record)).toBe(Object.prototype);
+    expect(Object.prototype.hasOwnProperty.call(record, '__proto__')).toBe(true);
+    expect(Object.getOwnPropertyDescriptor(record, '__proto__')?.value).toBe('safe');
+    dataSource.release();
+  });
+
+  test('creates sensitive nested path keys without polluting Object.prototype', () => {
+    const record = {};
+    const dataSource = new DataSource({ records: [record] });
+
+    dataSource.changeFieldValueByRecordIndex('safe', 0, 'constructor.prototype.polluted');
+
+    expect(Object.prototype.hasOwnProperty.call(record, 'constructor')).toBe(true);
+    expect(Object.prototype.hasOwnProperty.call(record.constructor, 'prototype')).toBe(true);
+    expect(record.constructor.prototype.polluted).toBe('safe');
+    expect(Object.prototype.polluted).toBeUndefined();
+
+    dataSource.changeFieldValueByRecordIndex('nested-safe', 0, ['__proto__', 'polluted']);
+
+    expect(Object.getPrototypeOf(record)).toBe(Object.prototype);
+    expect(Object.getOwnPropertyDescriptor(record, '__proto__')?.value.polluted).toBe('nested-safe');
+    expect(Object.prototype.polluted).toBeUndefined();
+    dataSource.release();
+  });
+});

packages/vtable/examples/debug/issue-4186-nested-field-edit.ts

@@ -0,0 +1,96 @@
+import * as VTable from '../../src';
+import { InputEditor } from '@visactor/vtable-editors';
+
+const CONTAINER_ID = 'vTable';
+const FIELD = 'facts.2025-02.qty';
+const inputEditor = new InputEditor({});
+VTable.register.editor('issue4186-input', inputEditor);
+
+const records = [
+  {
+    id: 1,
+    facts: {
+      '2025-02': {
+        qty: 10
+      }
+    }
+  }
+];
+
+const updateResult = (status: HTMLElement, source: HTMLElement) => {
+  const record = records[0] as any;
+  const nestedValue = record.facts?.['2025-02']?.qty;
+  const flatValue = record[FIELD];
+  const pass = nestedValue === 18 && !Object.prototype.hasOwnProperty.call(record, FIELD);
+
+  status.textContent = `${pass ? 'PASS' : 'FAIL'} | nested=${nestedValue}, flat=${String(flatValue)}`;
+  status.style.color = pass ? '#237804' : '#a8071a';
+  source.textContent = JSON.stringify(record, null, 2);
+  return pass;
+};
+
+const createControls = () => {
+  document.getElementById('issue4186Controls')?.remove();
+  const container = document.getElementById(CONTAINER_ID)!;
+  const controls = document.createElement('div');
+  controls.id = 'issue4186Controls';
+  controls.style.cssText = 'margin-bottom: 12px; font: 13px/1.5 sans-serif;';
+
+  const runButton = document.createElement('button');
+  runButton.textContent = 'Run #4186 check';
+
+  const resetButton = document.createElement('button');
+  resetButton.textContent = 'Reset';
+  resetButton.style.marginLeft = '8px';
+
+  const status = document.createElement('span');
+  status.id = 'issue4186Status';
+  status.style.marginLeft = '12px';
+  status.textContent = 'READY | nested=10';
+
+  const source = document.createElement('pre');
+  source.id = 'issue4186Source';
+  source.style.cssText = 'margin: 8px 0 0; padding: 8px; background: #f5f5f5;';
+  source.textContent = JSON.stringify(records[0], null, 2);
+
+  controls.append(runButton, resetButton, status, source);
+  container.parentElement?.insertBefore(controls, container);
+
+  return { runButton, resetButton, status, source };
+};
+
+export function createTable() {
+  const controls = createControls();
+  const tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID)!, {
+    records,
+    columns: [
+      { field: 'id', title: 'ID', width: 100 },
+      { field: FIELD, title: '2025-02 Quantity', width: 220, editor: 'issue4186-input' }
+    ],
+    editCellTrigger: 'doubleclick',
+    widthMode: 'standard',
+    defaultRowHeight: 40
+  });
+
+  const runCheck = async () => {
+    tableInstance.changeCellValue(1, tableInstance.columnHeaderLevelCount, '18');
+    await new Promise(resolve => requestAnimationFrame(resolve));
+    const pass = updateResult(controls.status, controls.source);
+    (window as any).BUGSERVER_SCREENSHOT?.();
+    return pass;
+  };
+
+  controls.runButton.onclick = runCheck;
+  controls.resetButton.onclick = () => {
+    records[0].facts['2025-02'].qty = 10;
+    delete (records[0] as any)[FIELD];
+    tableInstance.setRecords(records);
+    controls.status.textContent = 'READY | nested=10';
+    controls.status.style.color = '';
+    controls.source.textContent = JSON.stringify(records[0], null, 2);
+  };
+  tableInstance.on('change_cell_value', () => updateResult(controls.status, controls.source));
+
+  (window as any).tableInstance = tableInstance;
+  (window as any).issue4186Run = runCheck;
+}