Add ignoreUnregister form config. final-form#474

Dragomir-Ivanov · Jun 28, 2023 · 15d5e7d · 15d5e7d
1 parent d20c44b
commit 15d5e7d
Show file tree

Hide file tree

Showing 8 changed files with 214 additions and 2 deletions.
diff --git a/docs/types/Config.md b/docs/types/Config.md
@@ -34,6 +34,16 @@ boolean
 
 If `true`, the value of a field will be destroyed when that field is unregistered. Defaults to `false`. Can be useful when creating dynamic forms where only form values displayed need be submitted.
 
+## `ignoreUnregister`
+
+Optional.
+
+```ts
+boolean
+```
+
+If `true`, the value and state of a field will be preserved when that field is unregistered. Defaults to `false`. Can be useful when hiding part of the form, as an optimization. Mainly to be used by JS framework wrappers, such as `react-final-form`.
+
 ## `initialValues`
 
 ```ts

diff --git a/docs/types/FormApi.md b/docs/types/FormApi.md
@@ -44,6 +44,14 @@ boolean
 
 A read/write property to get and set the `destroyOnUnregister` config setting.
 
+## `ignoreUnregister`
+
+```ts
+boolean
+```
+
+A read/write property to get and set the `ignoreUnregister` config setting.
+
 ## `focus`
 
 ```ts

diff --git a/package.json b/package.json
@@ -93,7 +93,7 @@
     },
     {
       "path": "dist/final-form.cjs.js",
-      "maxSize": "10.5kB"
+      "maxSize": "10.6kB"
     }
   ],
   "dependencies": {

diff --git a/src/FinalForm.fieldSubscribing.test.js b/src/FinalForm.fieldSubscribing.test.js
@@ -912,4 +912,86 @@ describe("Field.subscribing", () => {
     expect(name1).toHaveBeenCalledTimes(1);
     expect(name2).toHaveBeenCalledTimes(1);
   });
+
+  it("should loose field state on unregister when ignoreUnregister is false", () => {
+    const form = createForm({
+      onSubmit: onSubmitMock,
+    });
+
+    const subscriber = jest.fn();
+    let unregister = form.registerField("foo", subscriber, { value: true });
+
+    // initial state
+    expect(form.getFieldState("foo").dirty).toBe(false);
+    expect(form.getFieldState("foo").touched).toBe(false);
+    expect(form.getFieldState("foo").modified).toBe(false);
+
+    // change value
+    form.change("foo", "bar");
+    form.blur("foo");
+
+    // state changed
+    expect(form.getFieldState("foo").dirty).toBe(true);
+    expect(form.getFieldState("foo").touched).toBe(true);
+    expect(form.getFieldState("foo").modified).toBe(true);
+
+    // unregister should remove state
+    unregister();
+
+    // field state is lost
+    expect(form.getFieldState("foo")).toBe(undefined);
+
+    // re-register the same field
+    unregister = form.registerField("foo", subscriber, { value: true });
+
+    // dirty state is preserved, because FF doesn't touch the value on unregister
+    expect(form.getFieldState("foo").dirty).toBe(true);
+
+    // however the other states are reset
+    expect(form.getFieldState("foo").touched).toBe(false);
+    expect(form.getFieldState("foo").modified).toBe(false);
+  });
+
+  it("should keep field state on unregister when ignoreUnregister is true", () => {
+    const form = createForm({
+      onSubmit: onSubmitMock,
+      ignoreUnregister: true,
+    });
+
+    const subscriber = jest.fn();
+    let unregister = form.registerField("foo", subscriber, { value: true });
+
+    // initial state
+    expect(form.getFieldState("foo").dirty).toBe(false);
+    expect(form.getFieldState("foo").touched).toBe(false);
+    expect(form.getFieldState("foo").modified).toBe(false);
+
+    // change value
+    form.change("foo", "bar");
+    form.blur("foo");
+
+    // state changed
+    expect(form.getFieldState("foo").dirty).toBe(true);
+    expect(form.getFieldState("foo").touched).toBe(true);
+    expect(form.getFieldState("foo").modified).toBe(true);
+
+    // unregister should remove state
+    unregister();
+
+    // field state is preserved
+    expect(form.getFieldState("foo")).not.toBe(undefined);
+    expect(form.getFieldState("foo").dirty).toBe(true);
+    expect(form.getFieldState("foo").touched).toBe(true);
+    expect(form.getFieldState("foo").modified).toBe(true);
+
+    // re-register the same field
+    unregister = form.registerField("foo", subscriber, { value: true });
+
+    // dirty state is preserved, because FF doesn't touch the value on unregister
+    expect(form.getFieldState("foo").dirty).toBe(true);
+
+    // however the other states are reset
+    expect(form.getFieldState("foo").touched).toBe(true);
+    expect(form.getFieldState("foo").modified).toBe(true);
+  });
 });
diff --git a/src/FinalForm.js b/src/FinalForm.js
@@ -171,6 +171,7 @@ function createForm<FormValues: FormValuesShape>(
   let {
     debug,
     destroyOnUnregister,
+    ignoreUnregister,
     keepDirtyOnReinitialize,
     initialValues,
     mutators,
@@ -757,6 +758,13 @@ function createForm<FormValues: FormValuesShape>(
       destroyOnUnregister = value;
     },
 
+    get ignoreUnregister() {
+      return !!ignoreUnregister;
+    },
+    set ignoreUnregister(value: boolean) {
+      ignoreUnregister = value;
+    },
+
     focus: (name: string) => {
       const field = state.fields[name];
       if (field && !field.active) {
@@ -950,7 +958,7 @@ function createForm<FormValues: FormValuesShape>(
         let lastOne =
           hasFieldSubscribers &&
           !Object.keys(state.fieldSubscribers[name].entries).length;
-        if (lastOne) {
+        if (lastOne && !ignoreUnregister) {
           delete state.fieldSubscribers[name];
           delete state.fields[name];
           if (validatorRemoved) {
@@ -1058,6 +1066,9 @@ function createForm<FormValues: FormValuesShape>(
         case "destroyOnUnregister":
           destroyOnUnregister = value;
           break;
+        case "ignoreUnregister":
+          ignoreUnregister = value;
+          break;
         case "initialValues":
           api.initialize(value);
           break;

diff --git a/src/FinalForm.setConfig.test.js b/src/FinalForm.setConfig.test.js
@@ -492,4 +492,100 @@ describe("FinalForm.setConfig", () => {
     expect(foz).toHaveBeenCalledTimes(2); // but field not notified
     expect(form.destroyOnUnregister).toBe(true);
   });
+
+  it('should update ignoreUnregister on setConfig("ignoreUnregister", value)', () => {
+    const form = createForm({
+      onSubmit: onSubmitMock,
+      ignoreUnregister: true,
+    });
+
+    const subscriber = jest.fn();
+    let unregister = form.registerField("foo", subscriber, { value: true });
+
+    // initial state
+    expect(form.getFieldState("foo").dirty).toBe(false);
+    expect(form.getFieldState("foo").touched).toBe(false);
+    expect(form.getFieldState("foo").modified).toBe(false);
+
+    // change value
+    form.change("foo", "bar");
+    form.blur("foo");
+
+    // state changed
+    expect(form.getFieldState("foo").dirty).toBe(true);
+    expect(form.getFieldState("foo").touched).toBe(true);
+    expect(form.getFieldState("foo").modified).toBe(true);
+
+    expect(form.ignoreUnregister).toBe(false);
+    form.setConfig("destroyOnUnregister", true);
+
+    // unregister should remove state
+    unregister();
+
+    // field state is preserved
+    expect(form.getFieldState("foo")).not.toBe(undefined);
+    expect(form.getFieldState("foo").dirty).toBe(true);
+    expect(form.getFieldState("foo").touched).toBe(true);
+    expect(form.getFieldState("foo").modified).toBe(true);
+
+    // re-register the same field
+    unregister = form.registerField("foo", subscriber, { value: true });
+
+    // dirty state is preserved, because FF doesn't touch the value on unregister
+    expect(form.getFieldState("foo").dirty).toBe(true);
+
+    // however the other states are reset
+    expect(form.getFieldState("foo").touched).toBe(true);
+    expect(form.getFieldState("foo").modified).toBe(true);
+
+    expect(form.ignoreUnregister).toBe(true);
+  });
+
+  it("should update ignoreUnregister on ignoreUnregister setter", () => {
+    const form = createForm({
+      onSubmit: onSubmitMock,
+      ignoreUnregister: true,
+    });
+
+    const subscriber = jest.fn();
+    let unregister = form.registerField("foo", subscriber, { value: true });
+
+    // initial state
+    expect(form.getFieldState("foo").dirty).toBe(false);
+    expect(form.getFieldState("foo").touched).toBe(false);
+    expect(form.getFieldState("foo").modified).toBe(false);
+
+    // change value
+    form.change("foo", "bar");
+    form.blur("foo");
+
+    // state changed
+    expect(form.getFieldState("foo").dirty).toBe(true);
+    expect(form.getFieldState("foo").touched).toBe(true);
+    expect(form.getFieldState("foo").modified).toBe(true);
+
+    expect(form.ignoreUnregister).toBe(false);
+    form.ignoreUnregister = true;
+
+    // unregister should remove state
+    unregister();
+
+    // field state is preserved
+    expect(form.getFieldState("foo")).not.toBe(undefined);
+    expect(form.getFieldState("foo").dirty).toBe(true);
+    expect(form.getFieldState("foo").touched).toBe(true);
+    expect(form.getFieldState("foo").modified).toBe(true);
+
+    // re-register the same field
+    unregister = form.registerField("foo", subscriber, { value: true });
+
+    // dirty state is preserved, because FF doesn't touch the value on unregister
+    expect(form.getFieldState("foo").dirty).toBe(true);
+
+    // however the other states are reset
+    expect(form.getFieldState("foo").touched).toBe(true);
+    expect(form.getFieldState("foo").modified).toBe(true);
+
+    expect(form.ignoreUnregister).toBe(true);
+  });
 });
diff --git a/src/index.d.ts b/src/index.d.ts
@@ -214,6 +214,7 @@ export interface FormApi<
   blur: (name: keyof FormValues) => void;
   change: <F extends keyof FormValues>(name: F, value?: FormValues[F]) => void;
   destroyOnUnregister: boolean;
+  ignoreUnregister: boolean;
   focus: (name: keyof FormValues) => void;
   initialize: (
     data: InitialFormValues | ((values: FormValues) => InitialFormValues),
@@ -304,6 +305,7 @@ export interface Config<
 > {
   debug?: DebugFunction<FormValues, InitialFormValues>;
   destroyOnUnregister?: boolean;
+  ignoreUnregister?: boolean;
   initialValues?: InitialFormValues;
   keepDirtyOnReinitialize?: boolean;
   mutators?: { [key: string]: Mutator<FormValues, InitialFormValues> };

diff --git a/src/types.js.flow b/src/types.js.flow
@@ -204,6 +204,7 @@ export type InternalFormState<FormValues: FormValuesShape> = {
 export type ConfigKey =
   | "debug"
   | "destroyOnUnregister"
+  | "ignoreUnregister"
   | "initialValues"
   | "keepDirtyOnReinitialize"
   | "mutators"
@@ -216,6 +217,7 @@ export type FormApi<FormValues: FormValuesShape> = {
   blur: (name: string) => void,
   change: (name: string, value: ?any) => void,
   destroyOnUnregister: boolean,
+  ignoreUnregister: boolean,
   focus: (name: string) => void,
   initialize: (data: Object | ((values: Object) => Object)) => void,
   isValidationPaused: () => boolean,
@@ -286,6 +288,7 @@ export type Mutator<FormValues: FormValuesShape> = (
 export type Config<FormValues: FormValuesShape> = {
   debug?: DebugFunction<FormValues>,
   destroyOnUnregister?: boolean,
+  ignoreUnregister?: boolean,
   initialValues?: FormValues,
   keepDirtyOnReinitialize?: boolean,
   mutators?: { [string]: Mutator<FormValues> },