@dxos/react-ui-table 0.8.4-main.c1de068 → 0.8.4-main.e098934

package/src/model/table-model.ts

@@ -2,40 +2,47 @@
 // Copyright 2025 DXOS.org
 //
 
-import { computed, effect, signal, type ReadonlySignal } from '@preact/signals-core';
+import { type ReadonlySignal, computed, effect, signal } from '@preact/signals-core';
 
 import { Resource } from '@dxos/context';
 import { Obj, Ref } from '@dxos/echo';
 import {
-  type FieldSortType,
   FormatEnum,
-  getValue,
-  setValue,
   type JsonProp,
-  getSnapshot,
+  type JsonSchemaType,
   getSchema,
+  getValue,
+  setValue,
   toEffectSchema,
-  type JsonSchemaType,
 } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
 import { ObjectId } from '@dxos/keys';
-import { isLiveObject } from '@dxos/live-object';
+import { getSnapshot, isLiveObject } from '@dxos/live-object';
 import { fullyQualifiedId } from '@dxos/react-client/echo';
+import { type Label } from '@dxos/react-ui';
 import { formatForEditing, parseValue } from '@dxos/react-ui-form';
 import {
   type DxGridAxisMeta,
-  type DxGridPlaneRange,
   type DxGridPlanePosition,
+  type DxGridPlaneRange,
   type DxGridPosition,
 } from '@dxos/react-ui-grid';
-import { type DataType, ProjectionModel, type PropertyType, validateSchema, type ValidationError } from '@dxos/schema';
+import {
+  type DataType,
+  type FieldSortType,
+  ProjectionModel,
+  type PropertyType,
+  type ValidationError,
+  validateSchema,
+} from '@dxos/schema';
 
-import { type SelectionMode, SelectionModel } from './selection-model';
-import { TableSorting } from './table-sorting';
-import { TableView } from '../types';
+import { Table } from '../types';
 import { touch } from '../util';
 import { extractTagIds } from '../util/tag';
 
+import { type SelectionMode, SelectionModel } from './selection-model';
+import { TableSorting } from './table-sorting';
+
 // Domain types for cell classification
 export type TableCellType = 'standard' | 'draft' | 'header';
 
@@ -53,7 +60,7 @@ export type TableRow = Record<JsonProp, any> & { id: string };
 
 export type TableRowAction = {
   id: string;
-  translationKey: string;
+  label: Label;
 };
 
 export type TableFeatures = {
@@ -68,6 +75,8 @@ const defaultFeatures: TableFeatures = {
   schemaEditable: false,
 };
 
+export type InsertRowResult = 'draft' | 'final';
+
 export type TableModelProps<T extends TableRow = TableRow> = {
   view: DataType.View;
   schema: JsonSchemaType;
@@ -78,7 +87,7 @@ export type TableModelProps<T extends TableRow = TableRow> = {
   pinnedRows?: { top: number[]; bottom: number[] };
   rowActions?: TableRowAction[];
   onResolveSchema?: (typename: string) => Promise<JsonSchemaType>;
-  onInsertRow?: (data?: any) => boolean;
+  onInsertRow?: (data?: any) => InsertRowResult;
   onDeleteRows?: (index: number, obj: T[]) => void;
   onDeleteColumn?: (fieldId: string) => void;
   onCellUpdate?: (cell: DxGridPosition) => void;
@@ -89,14 +98,14 @@ export type TableModelProps<T extends TableRow = TableRow> = {
 export class TableModel<T extends TableRow = TableRow> extends Resource {
   private readonly _view: DataType.View;
   private readonly _projection: ProjectionModel;
-  private _table?: TableView;
+  private _table?: Table.Table;
 
   private readonly _visibleRange = signal<DxGridPlaneRange>({
     start: { row: 0, col: 0 },
     end: { row: 0, col: 0 },
   });
 
-  private readonly _onInsertRow?: (data?: any) => boolean;
+  private readonly _onInsertRow?: (data?: any) => InsertRowResult;
   private readonly _onDeleteRows?: TableModelProps<T>['onDeleteRows'];
   private readonly _onDeleteColumn?: TableModelProps<T>['onDeleteColumn'];
   private readonly _onCellUpdate?: TableModelProps<T>['onCellUpdate'];
@@ -173,7 +182,7 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
     return this._view;
   }
 
-  public get table(): TableView {
+  public get table(): Table.Table {
     invariant(this._table, 'Model not initialized');
     return this._table;
   }
@@ -236,7 +245,7 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
 
   protected override async _open(): Promise<void> {
     const presentation = this._view.presentation.target ?? (await this._view.presentation.load());
-    invariant(Obj.instanceOf(TableView, presentation));
+    invariant(Obj.instanceOf(Table.Table, presentation));
     this._table = presentation;
 
     this.initializeColumnMeta();
@@ -254,7 +263,7 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
       return {
         grid: meta,
         frozenColsStart: { 0: { size: 30, resizeable: false } },
-        frozenColsEnd: { 0: { size: 40, resizeable: false } },
+        frozenColsEnd: { 0: { size: 32, resizeable: false } },
       };
     });
   }
@@ -334,11 +343,12 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
 
   public getColumnCount = (): number => this._projection?.fields.length ?? 0;
 
-  public insertRow = (): void => {
+  public insertRow = (): InsertRowResult => {
     const result = this._onInsertRow?.();
-    if (result === false && this._draftRows.value.length === 0) {
+    if (result === 'draft' && this._draftRows.value.length === 0) {
       this.createDraftRow();
     }
+    return result ?? 'final';
   };
 
   private createDraftRow(): void {
@@ -393,14 +403,14 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
       return false;
     }
 
-    const success = this._onInsertRow?.(draftRow.data);
+    const insertRowResult = this._onInsertRow?.(draftRow.data);
 
-    if (success) {
+    if (insertRowResult === 'final') {
       const newDraftRows = this._draftRows.value.filter((_, index) => index !== draftRowIndex);
       this._draftRows.value = newDraftRows;
     }
 
-    return success ?? false;
+    return insertRowResult === 'final';
   };
 
   public deleteRow = (rowIndex: number): void => {
@@ -497,6 +507,7 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
       setValue(snapshot, field.path, transformedValue);
 
       const validationErrors = this.validateDraftRowData(snapshot);
+      // TODO(thure): These errors sometimes result in a useless message like “is missing” (what is missing?)
       if (validationErrors.length > 0) {
         const error = validationErrors.find((err) => err.path === field.path);
         if (error) {

package/src/model/table-presentation.test.ts

@@ -3,17 +3,18 @@
 //
 
 import { Schema } from 'effect';
-import { describe, expect, it, beforeEach } from 'vitest';
+import { beforeEach, describe, expect, it } from 'vitest';
 
-import { Obj } from '@dxos/echo';
+import { Filter, Query } from '@dxos/echo';
 import { TypedObject } from '@dxos/echo-schema';
 import { live } from '@dxos/live-object';
 import { createEchoSchema } from '@dxos/live-object/testing';
 import { createView } from '@dxos/schema';
 
+import { Table } from '../types';
+
 import { TableModel, type TableModelProps } from './table-model';
 import { TablePresentation } from './table-presentation';
-import { TableView } from '../types';
 
 describe('TablePresentation', () => {
   describe('row reactivity', () => {
@@ -97,7 +98,11 @@ class Test extends TypedObject({ typename: 'example.com/type/Test', version: '0.
 
 const createTableModel = (props: Partial<TableModelProps> = {}): TableModel => {
   const schema = createEchoSchema(Test);
-  const table = Obj.make(TableView, { sizes: {} });
-  const view = createView({ typename: schema.typename, jsonSchema: schema.jsonSchema, presentation: table });
+  const table = Table.make();
+  const view = createView({
+    query: Query.select(Filter.type(schema)),
+    jsonSchema: schema.jsonSchema,
+    presentation: table,
+  });
   return new TableModel({ view, schema: schema.jsonSchema, ...props });
 };

package/src/model/table-presentation.ts

@@ -6,7 +6,7 @@ import { signal } from '@preact/signals-core';
 import { isNotNullable } from 'effect/Predicate';
 
 import { Obj } from '@dxos/echo';
-import { FormatEnum, getValue, TypeEnum } from '@dxos/echo-schema';
+import { FormatEnum, TypeEnum, getValue } from '@dxos/echo-schema';
 import { cellClassesForFieldType, formatForDisplay } from '@dxos/react-ui-form';
 import {
   type DxGridCellValue,
@@ -16,12 +16,13 @@ import {
   toPlaneCellIndex,
 } from '@dxos/react-ui-grid';
 import { mx } from '@dxos/react-ui-theme';
-import { VIEW_FIELD_LIMIT, type FieldType } from '@dxos/schema';
+import { type FieldType, VIEW_FIELD_LIMIT } from '@dxos/schema';
 
-import { type SelectionMode } from './selection-model';
-import { type TableRow, type TableModel } from './table-model';
 import { tableButtons, tableControls } from '../util';
 
+import { type SelectionMode } from './selection-model';
+import { type TableModel, type TableRow } from './table-model';
+
 /**
  * Presentation layer for a table component, handling cell rendering and grid display logic.
  * Manages rendering of table cells, headers, selection columns, and action columns across
@@ -67,6 +68,9 @@ export class TablePresentation<T extends TableRow = TableRow> {
       case 'frozenRowsEnd':
         cells = this.getDraftRowCells(range);
         break;
+      case 'fixedEndStart':
+        cells = this.getDraftIconCells(range);
+        break;
       case 'fixedEndEnd':
         cells = this.getDraftActionCells(range);
         break;
@@ -137,20 +141,22 @@ export class TablePresentation<T extends TableRow = TableRow> {
     };
 
     const classes = [];
-    const formatClasses = cellClassesForFieldType({ type: props.type, format: props.format });
+    const formatClasses = cellClassesForFieldType(props);
+
     if (formatClasses) {
       classes.push(formatClasses);
     }
+
     const rowSelectionClasses = cellClassesForRowSelection(
       this.model.selection.isObjectSelected(obj),
       this.model.selection.selectionMode,
     );
+
     if (rowSelectionClasses) {
       classes.push(rowSelectionClasses);
     }
-    if (classes.length > 0) {
-      cell.className = mx(classes.flat());
-    }
+
+    cell.className = mx(classes);
 
     // Arrays.
     if (props.type === TypeEnum.Array) {
@@ -199,7 +205,7 @@ export class TablePresentation<T extends TableRow = TableRow> {
       const targetObj = getValue(obj, field.path)?.target;
       if (targetObj) {
         const dxn = Obj.getDXN(targetObj)?.toString();
-        cell.accessoryHtml = `<dx-ref-tag refId=${dxn} class="dx-button is-6 pli-[3px] pbe-[2px] min-bs-0 absolute inline-end-1"><dx-icon icon="ph--link-simple--regular"/></dx-ref-tag>`;
+        cell.accessoryHtml = `<dx-anchor refId=${dxn} class="dx-button is-6 pli-[3px] pbe-[2px] min-bs-0 absolute inline-end-2 block-start-[.2rem]" data-dx-grid-action="accessory"><dx-icon icon="ph--link-simple--regular"/></dx-anchor>`;
       }
     }
 
@@ -275,23 +281,34 @@ export class TablePresentation<T extends TableRow = TableRow> {
     const fields = this.model.projection?.fields ?? [];
     const draftRows = this.model.draftRows.value;
 
-    for (let row = range.start.row; row <= range.end.row && row < draftRows.length; row++) {
-      const draftRow = draftRows[row];
+    // Return cells of the CTA row if no draft row is active
+    if (draftRows.length === 0) {
       for (let col = range.start.col; col <= range.end.col && col < fields.length; col++) {
-        const field = fields[col];
-        if (!field) {
-          continue;
-        }
+        cells[toPlaneCellIndex({ col, row: 0 })] = {
+          value: '',
+          readonly: true,
+          className: 'dx-grid__row--cta__cell',
+        };
+      }
+    } else {
+      for (let row = range.start.row; row <= range.end.row && row < draftRows.length; row++) {
+        const draftRow = draftRows[row];
+        for (let col = range.start.col; col <= range.end.col && col < fields.length; col++) {
+          const cellIndex = toPlaneCellIndex({ col, row });
+          const field = fields[col];
+          if (!field) {
+            continue;
+          }
 
-        this.createDataCell(cells, draftRow.data, field, col, row);
+          this.createDataCell(cells, draftRow.data, field, col, row);
 
-        if (this.model.hasDraftRowValidationError(row, field.path)) {
-          const cellIndex = toPlaneCellIndex({ col, row });
-          const cellValue = cells[cellIndex];
-          if (cellValue) {
-            const existingClasses = cellValue.className || '';
-            const draftClasses = 'dx-grid__cell--flagged';
-            cellValue.className = existingClasses ? `${existingClasses} ${draftClasses}` : draftClasses;
+          if (this.model.hasDraftRowValidationError(row, field.path)) {
+            const cellValue = cells[cellIndex];
+            if (cellValue) {
+              const existingClasses = cellValue.className || '';
+              const draftClasses = 'dx-grid__cell--flagged';
+              cellValue.className = existingClasses ? `${existingClasses} ${draftClasses}` : draftClasses;
+            }
           }
         }
       }
@@ -310,14 +327,14 @@ export class TablePresentation<T extends TableRow = TableRow> {
 
       cells[toPlaneCellIndex({ col, row: 0 })] = {
         // TODO(burdon): Use same logic as form for fallback title.
-        value: props.title ?? field.path,
-        readonly: true,
+        value: '',
         resizeHandle: 'col',
         accessoryHtml: `
+          <span class="grow min-is-0 truncate">${props.title ?? field.path}</span>
           ${direction !== undefined ? tableButtons.sort.render({ fieldId: field.id, direction }) : ''}
           ${tableButtons.columnSettings.render({ fieldId: field.id })}
         `,
-        className: '!bg-toolbarSurface',
+        className: '!bg-toolbarSurface !text-description [&>div]:flex [&>div]:items-stretch',
       };
     }
 
@@ -400,14 +417,39 @@ export class TablePresentation<T extends TableRow = TableRow> {
     const cells: DxGridPlaneCells = {};
     const draftRows = this.model.draftRows.value;
 
-    for (let row = range.start.row; row <= range.end.row && row < draftRows.length; row++) {
-      const draftRow = draftRows[row];
-      const disabled = !draftRow.valid;
+    // Return cells of the CTA row if no draft row is active
+    if (draftRows.length === 0) {
+      cells[toPlaneCellIndex({ col: 0, row: 0 })] = {
+        value: '',
+        className: 'dx-grid__row--cta__cell',
+        readonly: true,
+      };
+    } else {
+      for (let row = range.start.row; row <= range.end.row && row < draftRows.length; row++) {
+        const draftRow = draftRows[row];
+        const disabled = !draftRow.valid;
+
+        cells[toPlaneCellIndex({ col: 0, row })] = {
+          value: '',
+          readonly: true,
+          accessoryHtml: tableButtons.saveDraftRow.render({ rowIndex: row, disabled }),
+        };
+      }
+    }
+
+    return cells;
+  }
+
+  private getDraftIconCells(range: DxGridPlaneRange): DxGridPlaneCells {
+    const cells: DxGridPlaneCells = {};
+    const draftRows = this.model.draftRows.value;
 
+    for (let row = range.start.row; row <= range.end.row; row++) {
       cells[toPlaneCellIndex({ col: 0, row })] = {
         value: '',
         readonly: true,
-        accessoryHtml: tableButtons.saveDraftRow.render({ rowIndex: row, disabled }),
+        accessoryHtml: '<dx-icon icon="ph--plus--regular" class="contents"></dx-icon>',
+        className: mx('[&>div]:grid [&>div]:place-content-center', draftRows.length < 1 && 'dx-grid__row--cta__cell'),
       };
     }
 

package/src/model/table-sorting.ts

@@ -2,15 +2,24 @@
 // Copyright 2025 DXOS.org
 //
 
-import { computed, signal, type Signal, type ReadonlySignal } from '@preact/signals-core';
+import { type ReadonlySignal, type Signal, computed, signal } from '@preact/signals-core';
 import orderBy from 'lodash.orderby';
 
-import { getValue, FormatEnum, TypeEnum, type SortDirectionType, type FieldSortType } from '@dxos/echo-schema';
+import { FormatEnum, TypeEnum, getValue } from '@dxos/echo-schema';
 import { formatForDisplay } from '@dxos/react-ui-form';
-import type { PropertyType, FieldType, DataType, ProjectionModel } from '@dxos/schema';
+import type {
+  DataType,
+  FieldSortType,
+  FieldType,
+  ProjectionModel,
+  PropertyType,
+  SortDirectionType,
+} from '@dxos/schema';
 
 import { type TableRow } from './table-model';
 
+// TODO(wittjosiah): Remove. Use ordering in queries instead.
+
 /**
  * Represents the local sort state.
  * - undefined: No local sort set, fallback to view sort.
@@ -55,7 +64,7 @@ export class TableSorting<T extends TableRow> {
     this._rows = rows;
     this._isDirty = computed(() => {
       const local = this._localSort.value;
-      const viewSort = this._view.query.sort?.[0];
+      const viewSort = this._view.sort?.[0];
       if (local?.type === 'cleared') {
         return viewSort !== undefined;
       }
@@ -83,7 +92,7 @@ export class TableSorting<T extends TableRow> {
       return local.sort;
     }
 
-    return this._view.query.sort?.[0];
+    return this._view.sort?.[0];
   }
 
   /**
@@ -129,9 +138,9 @@ export class TableSorting<T extends TableRow> {
   public save(): void {
     if (this._localSort.value !== undefined) {
       if (this._localSort.value.type === 'active') {
-        this._view.query.sort = [this._localSort.value.sort];
+        this._view.sort = [this._localSort.value.sort];
       } else {
-        this._view.query.sort = [];
+        this._view.sort = [];
       }
       this._localSort.value = undefined;
     }

package/src/playwright/smoke.spec.ts

@@ -4,16 +4,20 @@
 
 import { expect, test } from '@playwright/test';
 
+import { type DxGrid } from '@dxos/lit-grid';
+import { faker } from '@dxos/random';
 import { setupPage, storybookUrl } from '@dxos/test-utils/playwright';
 
 import { TableManager } from './TableManager';
 
 const storyUrl = storybookUrl('ui-react-ui-table-table--default', 9004);
+const relationsStoryUrl = storybookUrl('ui-react-ui-table-relations--default', 9004);
 
 // NOTE(ZaymonFC): This test suite relies on the faker seed being set to 0 in the story.
 test.describe('Table', () => {
   test('Loads', async ({ browser, browserName }) => {
     test.skip(browserName === 'webkit');
+    test.skip(browserName === 'firefox');
     const { page } = await setupPage(browser, { url: storyUrl });
     const table = new TableManager(page);
 
@@ -23,6 +27,7 @@ test.describe('Table', () => {
 
   test('sort', async ({ browser, browserName }) => {
     test.skip(browserName === 'webkit');
+    test.skip(browserName === 'firefox');
     const { page } = await setupPage(browser, { url: storyUrl });
     const table = new TableManager(page);
 
@@ -39,6 +44,7 @@ test.describe('Table', () => {
 
   test('selection', async ({ browser, browserName }) => {
     test.skip(browserName === 'webkit');
+    test.skip(browserName === 'firefox');
     const { page } = await setupPage(browser, { url: storyUrl });
     const table = new TableManager(page);
 
@@ -60,6 +66,7 @@ test.describe('Table', () => {
 
   test('delete row', async ({ browser, browserName }) => {
     test.skip(browserName === 'webkit');
+    test.skip(browserName === 'firefox');
     const { page } = await setupPage(browser, { url: storyUrl });
     const table = new TableManager(page);
 
@@ -71,6 +78,7 @@ test.describe('Table', () => {
 
   test('delete row--select all', async ({ browser, browserName }) => {
     test.skip(browserName === 'webkit');
+    test.skip(browserName === 'firefox');
     const { page } = await setupPage(browser, { url: storyUrl });
     const table = new TableManager(page);
 
@@ -88,6 +96,7 @@ test.describe('Table', () => {
 
   test('delete column', async ({ browser, browserName }) => {
     test.skip(browserName === 'webkit');
+    test.skip(browserName === 'firefox');
     const { page } = await setupPage(browser, { url: storyUrl });
     const table = new TableManager(page);
 
@@ -114,6 +123,7 @@ test.describe('Table', () => {
   // Rest of add column test remains the same as it's a more complex flow.
   test('add column', async ({ browser, browserName }) => {
     test.skip(browserName === 'webkit');
+    test.skip(browserName === 'firefox');
     const { page } = await setupPage(browser, { url: storyUrl });
     const table = new TableManager(page);
 
@@ -126,44 +136,9 @@ test.describe('Table', () => {
     await page.close();
   });
 
-  test('reference > reference / create new object', async ({ browser, browserName }) => {
-    test.skip(browserName === 'webkit');
-    const { page } = await setupPage(browser, { url: storyUrl });
-    const table = new TableManager(page);
-
-    await table.grid.ready();
-
-    // Reference existing object.
-    // Scroll over to the manager column.
-    await table.grid.panByWheel(10000, 0);
-
-    await table.grid.cell(4, 0, 'grid').click();
-    // TODO(wittjosiah): Surprisingly long delay needed here.
-    await page.keyboard.press('A', { delay: 1_000 });
-    await page.keyboard.press('u', { delay: 1_000 });
-    await page.getByRole('option', { name: 'Aut.' }).click();
-
-    // Assert that the value is shown in the cell.
-    await expect(page.getByRole('gridcell', { name: 'Aut.' }).first()).toBeVisible();
-
-    // Create new object.
-    await table.grid.cell(4, 1, 'grid').click();
-    // TODO(wittjosiah): Surprisingly long delay needed here.
-    await page.keyboard.type('t', { delay: 1_000 });
-    await page.keyboard.type('e', { delay: 1_000 });
-    await page.keyboard.type('s', { delay: 1_000 });
-    await page.keyboard.type('t', { delay: 1_000 });
-    await page.getByText('Create new object', { exact: false }).click();
-    await page.getByTestId('save-button').click();
-
-    // Scroll to the left.
-    await page.getByRole('gridcell', { name: 'test' }).first().click();
-
-    await page.close();
-  });
-
-  test('test toggles', async ({ browser, browserName }) => {
+  test.skip('test toggles', async ({ browser, browserName }) => {
     test.skip(browserName === 'webkit');
+    test.skip(browserName === 'firefox');
     const { page } = await setupPage(browser, { url: storyUrl });
     const table = new TableManager(page);
 
@@ -183,4 +158,121 @@ test.describe('Table', () => {
 
     await page.close();
   });
+
+  test('extant relations work as expected', async ({ browser, browserName }) => {
+    test.skip(browserName === 'webkit');
+    test.skip(browserName === 'firefox');
+    const { page } = await setupPage(browser, { url: relationsStoryUrl });
+
+    // Wait for the page to load
+    await page.locator('dx-grid > .dx-grid').nth(1).waitFor({ state: 'visible' });
+
+    // Find the dx-grid element for the contactModel (second table)
+    // The contactModel is used in the second Table.Main component in the story
+    const dxGrid = page.locator('dx-grid').nth(1);
+    await dxGrid.waitFor({ state: 'visible' });
+
+    // Scroll to the last column (column 4)
+    await dxGrid.evaluate(async (dxGridElement: DxGrid) => {
+      dxGridElement.scrollToColumn(4);
+    });
+
+    // Click on the cell at aria-rowindex=0 aria-colindex=4 to focus it
+    const targetCell = dxGrid.locator('[data-dx-grid-plane="grid"] [aria-rowindex="0"][aria-colindex="4"]');
+    await targetCell.click();
+
+    // Click again to engage edit mode
+    await page.keyboard.press('Enter');
+
+    // Click on the combobox to open options
+    await page.getByRole('combobox').click();
+    await page.pause();
+    await page.getByPlaceholder('Search...').focus();
+
+    // Type the first few letters of an org name.
+    const orgName =
+      (await page
+        .locator('dx-grid')
+        .nth(0)
+        .locator('[data-dx-grid-plane="grid"] [aria-rowindex="0"][aria-colindex="0"] .dx-grid__cell__content')
+        .textContent()) ?? 'never';
+    await page.keyboard.type(orgName.substring(0, 4), { delay: 500 });
+
+    // Assert that there is an element with aria-selected on the page
+    await expect(page.locator('[role="option"][aria-selected]')).toBeVisible();
+
+    // Type the enter key
+    await page.keyboard.press('Enter');
+
+    // Save the result
+    await page.getByTestId('save-button').click();
+
+    // Assert that the cell element has the org name
+    await expect(targetCell).toHaveText(orgName);
+
+    await page.close();
+  });
+
+  test('new relations work as expected', async ({ browser, browserName }) => {
+    test.skip(browserName === 'webkit');
+    test.skip(browserName === 'firefox');
+    const { page } = await setupPage(browser, { url: relationsStoryUrl });
+
+    // Wait for the page to load
+    await page.locator('dx-grid > .dx-grid').nth(1).waitFor({ state: 'visible' });
+
+    // Find the dx-grid element for the contactModel (second table)
+    // The contactModel is used in the second Table.Main component in the story
+    const dxGrid = page.locator('dx-grid').nth(1);
+    await dxGrid.waitFor({ state: 'visible' });
+
+    // Scroll to the last column (column 4)
+    await dxGrid.evaluate(async (dxGridElement: DxGrid) => {
+      dxGridElement.scrollToColumn(4);
+    });
+
+    // Click on the cell at aria-rowindex=0 aria-colindex=8 to focus it
+    const targetCell = dxGrid.locator('[data-dx-grid-plane="grid"] [aria-rowindex="0"][aria-colindex="4"]');
+    await targetCell.click();
+
+    // Click again to engage edit mode
+    await page.keyboard.press('Enter');
+
+    // Click on the combobox to open options
+    await page.getByRole('combobox').click();
+    await page.getByPlaceholder('Search...').focus();
+
+    // Type the first few letters of an org name.
+    const orgName = 'Sally';
+    await page.keyboard.type(orgName, { delay: 500 });
+
+    // Assert that there is an element with aria-selected on the page
+    await expect(page.locator('[role="option"][aria-selected]')).toBeVisible();
+
+    // Type the enter key
+    await page.keyboard.press('Enter');
+    await page.pause();
+
+    // Click the save button in the popover
+    await page.getByTestId('save-button').click();
+
+    // Assert that the cell element has the org name
+    await expect(targetCell).toHaveText(orgName);
+
+    // Make a change to a non-ref cell to check that populated refs don’t cause problems with snapshots or schemas.
+    await dxGrid.evaluate(async (dxGridElement: DxGrid) => {
+      dxGridElement.scrollToColumn(6);
+    });
+
+    const nonRefContent = faker.lorem.words(3);
+    const nonRefCell = dxGrid.locator('[data-dx-grid-plane="grid"] [aria-rowindex="0"][aria-colindex="6"]');
+    await nonRefCell.click();
+    await page.keyboard.press('Enter');
+    await page.getByTestId('grid.cell-editor').waitFor({ state: 'visible' });
+    await page.keyboard.type(nonRefContent, { delay: 500 });
+    await page.keyboard.press('Enter');
+    await expect(nonRefCell).toHaveText(nonRefContent);
+
+    await page.close();
+  });
 });