feat(manager): implement allowNull

Author: rvsia

packages/form-state-manager/src/files/use-field.ts

@@ -65,6 +65,7 @@ const useField = ({
   formatOnBlur,
   beforeSubmit,
   afterSubmit,
+  allowNull,
   ...props
 }: UseField): UseFieldData => {
   const { registerField, unregisterField, change, getFieldValue, blur, focus, formOptions, ...rest } = useContext(FormManagerContext);
@@ -135,7 +136,7 @@ const useField = ({
     }
   };
 
-  let valueToReturn = formOptions().getFieldValue(name) || '';
+  let valueToReturn = formOptions().getFieldValue(name);
   let checked;
 
   if (type === 'checkbox') {
@@ -157,9 +158,15 @@ const useField = ({
     finalFormat = format;
   }
 
+  valueToReturn = finalFormat(valueToReturn, name);
+
+  if ((valueToReturn === null && !allowNull) || (valueToReturn !== null && !valueToReturn)) {
+    valueToReturn = '';
+  }
+
   return {
     input: {
-      value: finalFormat(valueToReturn, name),
+      value: valueToReturn,
       onChange,
       onFocus: () => focus(name),
       onBlur: () => blur(name),

packages/form-state-manager/src/tests/files/use-field.test.js

@@ -1206,4 +1206,61 @@ describe('useField', () => {
       expect(wrapper.find('input').props().value).toEqual(''); // it's controlled
     });
   });
+
+  describe('allowNull', () => {
+    let Dummy;
+    let wrapper;
+
+    beforeEach(() => {
+      managerApi = createManagerApi({});
+
+      Dummy = (props) => {
+        const { input } = useField(props);
+        return <input {...input} />;
+      };
+    });
+
+    it('by default converts null to empty string', async () => {
+      wrapper = mount(
+        <FormManagerContext.Provider value={{ ...managerApi(), formOptions: managerApi }}>
+          <Dummy name="field" />
+        </FormManagerContext.Provider>
+      );
+
+      await act(async () => {
+        wrapper.find('input').simulate('change', { target: { value: null } });
+      });
+      wrapper.update();
+
+      expect(wrapper.find('input').props().value).toEqual('');
+    });
+
+    it('allows null', async () => {
+      // disable console errors:
+      // expected:
+      //      1. input cannot be null
+      //      2. controlled to uncontrolled
+
+      // eslint-disable-next-line no-console
+      const _consoleError = console.error;
+      // eslint-disable-next-line no-console
+      console.error = jest.fn();
+
+      wrapper = mount(
+        <FormManagerContext.Provider value={{ ...managerApi(), formOptions: managerApi }}>
+          <Dummy name="field" allowNull />
+        </FormManagerContext.Provider>
+      );
+
+      await act(async () => {
+        wrapper.find('input').simulate('change', { target: { value: null } });
+      });
+      wrapper.update();
+
+      expect(wrapper.find('input').props().value).toEqual(null);
+
+      // eslint-disable-next-line no-console
+      console.error = _consoleError;
+    });
+  });
 });

packages/form-state-manager/src/types/use-field.d.ts

@@ -80,6 +80,7 @@ export interface UseField extends AnyObject {
   formatOnBlur?: boolean;
   afterSubmit?: AfterSubmit;
   beforeSubmit?: BeforeSubmit;
+  allowNull?: boolean;
 }
 
 export default UseField;