fix(renderer): clearOnMount set clearedValue, not undefined

Author: rvsia

packages/react-form-renderer/src/hooks/use-field-api.js

@@ -15,31 +15,29 @@ const useFieldApi = ({ name, initializeOnMount, component, render, validate, dat
      * This affects conditional fields
      */
     if (initializeOnMount) {
-      const initialValue = Object.prototype.hasOwnProperty.call(props, 'initialValue')
-        ? props.initialValue
-        : props.formOptions.getFieldState(props.name).initial;
+      const initialValue = Object.prototype.hasOwnProperty.call(props, 'initialValue') ? props.initialValue : formOptions.getFieldState(name).initial;
       fieldProps.input.onChange(initialValue);
     }
   }, [initializeOnMount, props.initialValue, fieldProps.meta.initial, fieldProps.input]);
 
+  /**
+   * Prepare deleted value of field
+   */
+  const fieldClearedValue = Object.prototype.hasOwnProperty.call(props, 'clearedValue') ? props.clearedValue : formOptions.clearedValue;
+
   useEffect(
     () => () => {
       /**
        * Delete the value from form state when field is inmounted
        */
       if ((formOptions.clearOnUnmount || props.clearOnUnmount) && props.clearOnUnmount !== false) {
-        fieldProps.input.onChange(undefined);
+        fieldProps.input.onChange(fieldClearedValue);
       }
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   );
 
-  /**
-   * Prepare deleted value of field
-   */
-  const fieldClearedValue = Object.prototype.hasOwnProperty.call(props, 'clearedValue') ? props.clearedValue : formOptions.clearedValue;
-
   /**
    * Map actions to props
    */

packages/react-form-renderer/src/tests/form-renderer/render-form.test.js

@@ -992,6 +992,129 @@ describe('renderForm function', () => {
       wrapper.find('form').simulate('submit');
       expect(onSubmit).toHaveBeenCalledWith({ unmnounted: undefined, foo: 'barrr' });
     });
+
+    it('should clear values after unmount and set to field cleared value', () => {
+      const schema = {
+        fields: [
+          {
+            component: componentTypes.TEXT_FIELD,
+            name: 'foo'
+          },
+          {
+            component: componentTypes.TEXT_FIELD,
+            name: 'unmnounted',
+            label: 'Label 1',
+            clearedValue: 'bla',
+            clearOnUnmount: true,
+            condition: {
+              when: 'foo',
+              is: 'show'
+            }
+          }
+        ]
+      };
+
+      const onSubmit = jest.fn();
+
+      const wrapper = mount(
+        <FormRenderer
+          FormTemplate={(props) => <FormTemplate {...props} />}
+          componentMapper={{
+            [componentTypes.TEXT_FIELD]: TextField
+          }}
+          schema={schema}
+          onSubmit={(values) => onSubmit(values)}
+          clearedValue="BlaBlaBla"
+        />
+      );
+
+      wrapper
+        .find('input')
+        .first()
+        .simulate('change', { target: { value: 'show' } });
+      wrapper.update();
+      wrapper
+        .find('input')
+        .last()
+        .simulate('change', { target: { value: 'foovalue' } });
+      wrapper.update();
+
+      wrapper.find('form').simulate('submit');
+
+      expect(onSubmit).toHaveBeenCalledWith({ foo: 'show', unmnounted: 'foovalue' });
+      onSubmit.mockClear();
+
+      wrapper
+        .find('input')
+        .first()
+        .simulate('change', { target: { value: 'barrr' } });
+      wrapper.update();
+
+      wrapper.find('form').simulate('submit');
+
+      expect(onSubmit).toHaveBeenCalledWith({ foo: 'barrr', unmnounted: 'bla' });
+    });
+
+    it('should clear values after unmount and set to form cleared value', () => {
+      const schema = {
+        fields: [
+          {
+            component: componentTypes.TEXT_FIELD,
+            name: 'foo'
+          },
+          {
+            component: componentTypes.TEXT_FIELD,
+            name: 'unmnounted',
+            label: 'Label 1',
+            clearOnUnmount: true,
+            condition: {
+              when: 'foo',
+              is: 'show'
+            }
+          }
+        ]
+      };
+
+      const onSubmit = jest.fn();
+
+      const wrapper = mount(
+        <FormRenderer
+          FormTemplate={(props) => <FormTemplate {...props} />}
+          componentMapper={{
+            [componentTypes.TEXT_FIELD]: TextField
+          }}
+          schema={schema}
+          onSubmit={(values) => onSubmit(values)}
+          clearedValue="BlaBlaBla"
+        />
+      );
+
+      wrapper
+        .find('input')
+        .first()
+        .simulate('change', { target: { value: 'show' } });
+      wrapper.update();
+      wrapper
+        .find('input')
+        .last()
+        .simulate('change', { target: { value: 'foovalue' } });
+      wrapper.update();
+
+      wrapper.find('form').simulate('submit');
+
+      expect(onSubmit).toHaveBeenCalledWith({ foo: 'show', unmnounted: 'foovalue' });
+      onSubmit.mockClear();
+
+      wrapper
+        .find('input')
+        .first()
+        .simulate('change', { target: { value: 'barrr' } });
+      wrapper.update();
+
+      wrapper.find('form').simulate('submit');
+
+      expect(onSubmit).toHaveBeenCalledWith({ foo: 'barrr', unmnounted: 'BlaBlaBla' });
+    });
   });
 
   describe('#initializeOnMount', () => {