fix(enhancedOnChange): handle empty string clearedValue and update tests

Author: mohith2883

packages/react-form-renderer/src/tests/form-renderer/enhanced-on-change.test.js

@@ -37,15 +37,15 @@ describe('#enhancedOnChange', () => {
         type: 'checkbox',
       },
     };
-    expect(enhancedOnChange({ onChange: (value) => value, clearedValue, initial }, valueFalse)).toEqual(valueFalse);
+    expect(enhancedOnChange({ onChange: (value) => value, clearedValue }, valueFalse)).toEqual(valueFalse);
 
     const valueTrue = {
       target: {
         checked: true,
         type: 'checkbox',
       },
     };
-    expect(enhancedOnChange({ onChange: (value) => value, clearedValue, initial }, valueTrue)).toEqual(valueTrue);
+    expect(enhancedOnChange({ onChange: (value) => value, clearedValue }, valueTrue)).toEqual(valueTrue);
   });
 
   it('should correctly convert array datatype from strings to integers', () => {
@@ -61,39 +61,47 @@ describe('#enhancedOnChange', () => {
 
     it('should set delete value after sending empty string value', () => {
       const value = undefined;
-      expect(enhancedOnChange({ onChange: (value) => value, initial, clearedValue }, value)).toEqual(clearedValue);
-      expect(enhancedOnChange({ onChange: (value) => value, initial, clearedValue }, '')).toEqual(clearedValue);
+      expect(enhancedOnChange({ onChange: (value) => value, clearedValue }, value)).toEqual(clearedValue);
+      expect(enhancedOnChange({ onChange: (value) => value, clearedValue }, '')).toEqual(clearedValue);
     });
 
     it('should not set delete value after sending date', () => {
       const value = new Date(2021, 7, 20);
-      expect(enhancedOnChange({ onChange: (value) => value, initial, clearedValue }, value)).toEqual(value);
+      expect(enhancedOnChange({ onChange: (value) => value, clearedValue }, value)).toEqual(value);
     });
 
     it('should not set delete value after sending number 0', () => {
       const value = 0;
-      expect(enhancedOnChange({ onChange: (value) => value, initial, clearedValue }, value)).toEqual(value);
+      expect(enhancedOnChange({ onChange: (value) => value, clearedValue }, value)).toEqual(value);
     });
 
     it('should set delete value after sending empty array', () => {
       const value = [];
-      expect(enhancedOnChange({ onChange: (value) => value, initial, clearedValue }, value)).toEqual(clearedValue);
+      expect(enhancedOnChange({ onChange: (value) => value, clearedValue }, value)).toEqual(clearedValue);
     });
 
     it('should set delete value after sending empty object', () => {
       const value = {};
-      expect(enhancedOnChange({ onChange: (value) => value, initial, clearedValue }, value)).toEqual(clearedValue);
+      expect(enhancedOnChange({ onChange: (value) => value, clearedValue }, value)).toEqual(clearedValue);
     });
 
     it('should not set delete value after sending array', () => {
       const value = [1, 2, 'foo'];
-      expect(enhancedOnChange({ onChange: (value) => value, initial, clearedValue }, value)).toEqual(value);
+      expect(enhancedOnChange({ onChange: (value) => value, clearedValue }, value)).toEqual(value);
     });
 
     it('should not set delete value after sending object', () => {
       const value = { foo: 'bar' };
-      expect(enhancedOnChange({ onChange: (value) => value, initial, clearedValue }, value)).toEqual(value);
+      expect(enhancedOnChange({ onChange: (value) => value, clearedValue }, value)).toEqual(value);
     });
+    it('should keep empty string when clearedValue is empty string', () => {
+      const clearedValue = '';
+      const value = undefined;
+      const onChange = jest.fn();
+      enhancedOnChange({ onChange, clearedValue }, value);
+      expect(onChange).toHaveBeenCalledWith('');
+    });
+
   });
 
   describe('#input type file', () => {

packages/react-form-renderer/src/use-field-api/enhanced-on-change.js

@@ -68,7 +68,7 @@ const enhancedOnChange = ({ dataType, onChange, initial, clearedValue, dirty, ..
       : convertType(dataType, sanitizedValue);
   }
 
-  if (checkEmpty(result) && typeof initial !== 'undefined') {
+  if (checkEmpty(result)) {
     return onChange(clearedValue, ...args);
   }
 

packages/react-renderer-demo/src/examples/components/cleared-value.js

@@ -49,6 +49,6 @@ const ClearedValueExample = () => {
   );
 };
 
-ClearedValueExample.displayName = 'Cleard value example';
+ClearedValueExample.displayName = 'Cleared value example';
 
 export default ClearedValueExample;