fix(renderer): clearOnMount set clearedValue, not undefined

Author: rvsia

packages/react-form-renderer/src/form-renderer/field-provider.js

@@ -13,15 +13,16 @@ class FieldProvider extends Component{
     }
   }
 
+  fieldClearedValue = () => this.props.hasOwnProperty('clearedValue') ? this.props.clearedValue : this.props.formOptions.clearedValue
+
   componentWillUnmount(){
     if ((this.props.formOptions.clearOnUnmount || this.props.clearOnUnmount) && this.props.clearOnUnmount !== false) {
-      this.props.formOptions.change(this.props.name, undefined);
+      this.props.formOptions.change(this.props.name, this.fieldClearedValue());
     }
   }
 
   render(){
     const { clearOnUnmount, component, render, dataType, children, ...props } = this.props;
-    const fieldClearedValue = props.hasOwnProperty('clearedValue') ? props.clearedValue : props.formOptions.clearedValue;
     const { clearedValue, ...fieldProps } = props;
     if (component) {
       const FieldComponent = component;
@@ -35,7 +36,7 @@ class FieldProvider extends Component{
                 ...fieldsProps.meta,
                 dataType,
                 onChange,
-                clearedValue: fieldClearedValue,
+                clearedValue: this.fieldClearedValue(),
               }, ...args);
             },
           }}
@@ -53,7 +54,7 @@ class FieldProvider extends Component{
               ...fieldsProps.meta,
               dataType,
               onChange,
-              clearedValue: fieldClearedValue,
+              clearedValue: this.fieldClearedValue(),
             }, ...args),
         },
       }) } />;
@@ -71,7 +72,7 @@ class FieldProvider extends Component{
                   ...fieldsProps.meta,
                   dataType,
                   onChange,
-                  clearedValue: fieldClearedValue,
+                  clearedValue: this.fieldClearedValue(),
                 }, ...args)  }}
             />
           ) }
@@ -95,6 +96,7 @@ FieldProvider.propTypes = {
   clearOnUnmount: PropTypes.bool,
   initializeOnMount: PropTypes.bool,
   initialValue: PropTypes.any,
+  clearedValue: PropTypes.any,
 };
 
 FieldProvider.defaultProps = {

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

@@ -684,6 +684,113 @@ describe('renderForm function', () => {
       wrapper.update();
       expect(wrapper.find(Form).instance().form.getState().values.unmnounted).toEqual(undefined);
     });
+
+    it('should clear values after unmount and set to field cleared value', () => {
+      layoutMapper = {
+        ...layoutMapper,
+        [layoutComponents.FORM_WRAPPER]: ({ children, ...props }) => <form { ...props }>{ children }</form>,
+      };
+
+      const schema = {
+        fields: [{
+          component: components.TEXT_FIELD,
+          name: 'foo',
+        }, {
+          component: components.TEXT_FIELD,
+          name: 'unmnounted',
+          label: 'Label 1',
+          clearedValue: 'bla',
+          clearOnUnmount: true,
+          condition: {
+            when: 'foo',
+            is: 'show',
+          },
+        }]};
+
+      const onSubmit = jest.fn();
+
+      const wrapper = mount(
+        <FormRenderer
+          layoutMapper={ layoutMapper }
+          formFieldsMapper={{
+            [components.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', () => {
+      layoutMapper = {
+        ...layoutMapper,
+        [layoutComponents.FORM_WRAPPER]: ({ children, ...props }) => <form { ...props }>{ children }</form>,
+      };
+
+      const schema = {
+        fields: [{
+          component: components.TEXT_FIELD,
+          name: 'foo',
+        }, {
+          component: components.TEXT_FIELD,
+          name: 'unmnounted',
+          label: 'Label 1',
+          clearOnUnmount: true,
+          condition: {
+            when: 'foo',
+            is: 'show',
+          },
+        }]};
+
+      const onSubmit = jest.fn();
+
+      const wrapper = mount(
+        <FormRenderer
+          layoutMapper={ layoutMapper }
+          formFieldsMapper={{
+            [components.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('#formSpy', () => {