Merge pull request #863 from rvsia/recalculateDirty

fix(manager): recalculate dirty/pristine based on fields

Author: Hyperkid123

packages/form-state-manager/src/tests/utils/manager-api.test.js

@@ -60,7 +60,11 @@ describe('managerApi', () => {
 
   describe('change', () => {
     it('should change the managerApi state', () => {
+      const render = jest.fn();
+
       const managerApi = createManagerApi({});
+      managerApi().registerField({ name: 'foo', render, internalId: '1' });
+
       managerApi().change('foo', 'bar');
 
       expect(managerApi().values).toEqual({ foo: 'bar' });
@@ -1942,4 +1946,36 @@ describe('managerApi', () => {
       expect(onSubmit).not.toHaveBeenCalled();
     });
   });
+
+  it('set form dirty and pristine according to fields', () => {
+    const onSubmit = jest.fn();
+
+    const managerApi = createManagerApi({ onSubmit });
+
+    managerApi().registerField({ name: 'field', render: jest.fn(), internalId: 1 });
+    managerApi().registerField({ name: 'field2', render: jest.fn(), internalId: 1, initialValue: 'initial' });
+
+    expect(managerApi().getState().pristine).toEqual(true);
+    expect(managerApi().getState().dirty).toEqual(false);
+
+    managerApi().change('field', 'foo');
+
+    expect(managerApi().getState().pristine).toEqual(false);
+    expect(managerApi().getState().dirty).toEqual(true);
+
+    managerApi().change('field2', 'initial-123');
+
+    expect(managerApi().getState().pristine).toEqual(false);
+    expect(managerApi().getState().dirty).toEqual(true);
+
+    managerApi().change('field', undefined);
+
+    expect(managerApi().getState().pristine).toEqual(false);
+    expect(managerApi().getState().dirty).toEqual(true);
+
+    managerApi().change('field2', 'initial');
+
+    expect(managerApi().getState().pristine).toEqual(true);
+    expect(managerApi().getState().dirty).toEqual(false);
+  });
 });

packages/form-state-manager/src/utils/manager-api.ts

@@ -517,8 +517,11 @@ const createManagerApi: CreateManagerApi = ({
         },
         value
       }));
-      state.pristine = false;
-      state.dirty = true;
+
+      const setDirty = isFormDirty();
+
+      state.pristine = !setDirty;
+      state.dirty = setDirty;
 
       revalidateFields([name, ...(state.fieldListeners[name]?.validateFields || state.registeredFields.filter((n) => n !== name))]);
 
@@ -530,6 +533,10 @@ const createManagerApi: CreateManagerApi = ({
     });
   }
 
+  function isFormDirty(): boolean {
+    return Object.entries(state.fieldListeners).some(([, field]) => field?.state?.meta?.dirty);
+  }
+
   function focus(name: string): void {
     if (state.active !== name) {
       const render = prepareRerender();