restores initial form context build from mount effect in useFieldType

src/client/components/forms/Form/reducer.js

@@ -68,7 +68,10 @@ function fieldReducer(state, action) {
 
         return {
           ...acc,
-          [field.name]: {},
+          [field.name]: {
+            value: null,
+            valid: !field.required,
+          },
         };
       }, {});
 

src/client/components/forms/useFieldType/index.js

@@ -4,9 +4,6 @@ import FormContext from '../Form/Context';
 import './index.scss';
 
 const useFieldType = (options) => {
-  const formContext = useContext(FormContext);
-  const { dispatchFields, submitted, processing } = formContext;
-
   const {
     name,
     required,
@@ -15,6 +12,10 @@ const useFieldType = (options) => {
     validate,
   } = options;
 
+  const formContext = useContext(FormContext);
+  const { dispatchFields, submitted, processing } = formContext;
+  const mountValue = formContext.fields[name]?.value || null;
+
   const sendField = useCallback((valueToSend) => {
     dispatchFields({
       name,
@@ -25,6 +26,10 @@ const useFieldType = (options) => {
     });
   }, [name, required, dispatchFields, validate]);
 
+  useEffect(() => {
+    sendField(mountValue);
+  }, [sendField, mountValue]);
+
   useEffect(() => {
     if (defaultValue != null) sendField(defaultValue);
   }, [defaultValue, sendField]);

src/client/components/layout/Section/index.scss

@@ -3,7 +3,6 @@
 section.section {
   @include inputShadow;
   margin: base(1) 0;
-  transition: 300ms ease;
 
   .section__collapsible-header {
     border-bottom: 1px solid $light-gray;