fix: send updates only when not rendering

packages/ts/react-crud/test/autocrud.spec.tsx

@@ -12,7 +12,14 @@ import ConfirmDialogController from './ConfirmDialogController.js';
 import { CrudController } from './CrudController.js';
 import FormController from './FormController';
 import GridController from './GridController';
-import { getItem, PersonModel, personService } from './test-models-and-services.js';
+import {
+ createService,
+ getItem,
+ PersonModel,
+ personService,
+ type UserData,
+ UserDataModel,
+} from './test-models-and-services.js';
 
 use(sinonChai);
 use(chaiDom);
@@ -325,6 +332,23 @@ describe('@vaadin/hilla-react-crud', () => {
  expect((await form.getField('Last name')).value).to.equal('');
  });
 
+ it('opens the form in a dialog when row has undefined value', async () => {
+ const nullData: UserData[] = [
+ {
+ id: 1,
+ name: undefined,
+ },
+ ];
+ const customService = createService(nullData);
+ const result = render(<AutoCrud service={customService} model={UserDataModel} />);
+ const grid = await GridController.init(result, user);
+ await grid.toggleRowSelected(0);
+
+ const form = await FormController.init(user);
+ expect(form.instance).to.exist;
+ expect((await form.getField('Name')).value).to.equal(undefined);
+ });
+
  it('closes the dialog when clicking close button', async () => {
  const result = render(<TestAutoCrud service={service} />);
  const grid = await GridController.init(result, user);

packages/ts/react-crud/test/test-models-and-services.ts

@@ -39,7 +39,7 @@ export interface Address {
 }
 
 export interface Department extends HasIdVersion {
- name: string;
+ name?: string;
 }
 
 export interface Person extends HasIdVersion, Named {
@@ -74,6 +74,10 @@ export interface ColumnRendererTestValues extends HasIdVersion {
  nested?: NestedTestValues;
 }
 
+export interface UserData extends HasIdVersion {
+ name?: string;
+}
+
 class GenderModel extends EnumModel<typeof Gender> {
  static override createEmptyValue = makeEnumEmptyValueCreator(GenderModel);
  readonly [_enum] = Gender;
@@ -349,6 +353,30 @@ export class ColumnRendererTestModel<
  }
 }
 
+export class UserDataModel<T extends UserData = UserData> extends ObjectModel<T> {
+ static override createEmptyValue = makeObjectEmptyValueCreator(UserDataModel);
+
+ get id(): NumberModel {
+ return this[_getPropertyModel](
+ 'id',
+ (parent, key) =>
+ new NumberModel(parent, key, true, { meta: { annotations: [{ name: 'jakarta.persistence.Id' }] } }),
+ );
+ }
+
+ get version(): NumberModel {
+ return this[_getPropertyModel](
+ 'version',
+ (parent, key) =>
+ new NumberModel(parent, key, true, { meta: { annotations: [{ name: 'jakarta.persistence.Version' }] } }),
+ );
+ }
+
+ get name(): StringModel {
+ return this[_getPropertyModel]('name', (parent, key) => new StringModel(parent, key, true));
+ }
+}
+
 type HasIdVersion = {
  id?: number;
  version?: number;

packages/ts/react-form/src/index.ts

@@ -26,9 +26,16 @@ import type { Writable } from 'type-fest';
 // eslint-disable-next-line @typescript-eslint/no-unsafe-call
 __REGISTER__();
 
+let isRendering = false;
+
 function useUpdate() {
- const [_, update] = useReducer((x: number) => x + 1, 0);
- return update;
+ const [_, count] = useReducer((x: number) => x + 1, 0);
+ return () => {
+ if (isRendering) {
+ return;
+ }
+ count();
+ };
 }
 
 export type FieldDirectiveResult = Readonly<{
@@ -128,6 +135,7 @@ function useFields<M extends AbstractModel>(node: BinderNode<M>): FieldDirective
  const registry = new WeakMap<AbstractModel, FieldState>();
 
  return ((model: AbstractModel) => {
+ isRendering = true;
  const n = getBinderNode(model);
 
  let fieldState = registry.get(model);
@@ -211,6 +219,7 @@ function useFields<M extends AbstractModel>(node: BinderNode<M>): FieldDirective
  fieldState.strategy.invalid = n.invalid;
  }
 
+ isRendering = false;
  return {
  name: n.name,
  ref: fieldState.ref,