feat: supports custom onChange handling in text, select, and upload fields

src/admin/components/forms/field-types/Select/index.tsx

@@ -54,7 +54,7 @@ const Select: React.FC<Props> = (props) => {
   }, [validate, required, options]);
 
   const {
-    value,
+    value: valueFromContext,
     showError,
     setValue,
     errorMessage,
@@ -90,12 +90,6 @@ const Select: React.FC<Props> = (props) => {
     setValue
   ])
 
-  useEffect(() => {
-    if (typeof valueFromProps === 'string') {
-      setValue(valueFromProps);
-    }
-  }, [valueFromProps])
-
   const classes = [
     'field-type',
     baseClass,
@@ -105,6 +99,8 @@ const Select: React.FC<Props> = (props) => {
 
   let valueToRender;
 
+  const value = valueFromProps || valueFromContext || '';
+
   if (hasMany && Array.isArray(value)) {
     valueToRender = value.map((val) => options.find((option) => option.value === val));
   } else {

src/admin/components/forms/field-types/Text/index.tsx

@@ -38,7 +38,7 @@ const Text: React.FC<Props> = (props) => {
   });
 
   const {
-    value,
+    value: valueFromContext,
     showError,
     setValue,
     errorMessage,
@@ -46,21 +46,16 @@ const Text: React.FC<Props> = (props) => {
 
   const onChange = useCallback((e) => {
     const { value: incomingValue } = e.target;
-    setValue(e);
     if (typeof onChangeFromProps === 'function') {
       onChangeFromProps(incomingValue);
+    } else {
+      setValue(e);
     }
   }, [
     onChangeFromProps,
     setValue,
   ]);
 
-  useEffect(() => {
-    if (typeof valueFromProps === 'string') {
-      setValue(valueFromProps);
-    }
-  }, [valueFromProps])
-
   const classes = [
     'field-type',
     'text',
@@ -68,6 +63,8 @@ const Text: React.FC<Props> = (props) => {
     readOnly && 'read-only',
   ].filter(Boolean).join(' ');
 
+  const value = valueFromProps || valueFromContext || '';
+
   return (
     <div
       className={classes}
@@ -86,7 +83,7 @@ const Text: React.FC<Props> = (props) => {
         required={required}
       />
       <input
-        value={value || ''}
+        value={value}
         onChange={onChange}
         disabled={readOnly}
         placeholder={placeholder}

src/admin/components/forms/field-types/Upload/index.tsx

@@ -60,12 +60,14 @@ const Upload: React.FC<Props> = (props) => {
   });
 
   const {
-    value,
+    value: valueFromContext,
     showError,
     setValue,
     errorMessage,
   } = fieldType;
 
+  const value = valueFromProps || valueFromContext || '';
+
   const classes = [
     'field-type',
     baseClass,
@@ -83,7 +85,6 @@ const Upload: React.FC<Props> = (props) => {
           setInternalValue(json);
         } else {
           setInternalValue(undefined);
-          setValue(null);
           setMissingFile(true);
         }
       };
@@ -92,7 +93,6 @@ const Upload: React.FC<Props> = (props) => {
     }
   }, [
     value,
-    setInternalValue,
     relationTo,
     api,
     serverURL,
@@ -108,8 +108,6 @@ const Upload: React.FC<Props> = (props) => {
     }
   }, [internalValue]);
 
-  const valueToUse = valueFromProps || value || '';
-
   return (
     <div
       className={classes}
@@ -139,7 +137,7 @@ const Upload: React.FC<Props> = (props) => {
               }}
             />
           )}
-          {(!valueToUse || missingFile) && (
+          {(!value || missingFile) && (
             <div className={`${baseClass}__wrap`}>
               <Button
                 buttonStyle="secondary"
@@ -182,7 +180,7 @@ const Upload: React.FC<Props> = (props) => {
           }}
           />
           <FieldDescription
-            value={valueToUse}
+            value={value}
             description={description}
           />
         </React.Fragment>

src/admin/components/forms/useFieldType/index.tsx

@@ -22,8 +22,10 @@ const useFieldType = <T extends unknown>(options: Options): FieldType<T> => {
   const modified = useFormModified();
 
   const {
-    dispatchFields, getField, setModified,
-  } = formContext;
+    dispatchFields,
+    getField,
+    setModified,
+  } = formContext || {};
 
   const [internalValue, setInternalValue] = useState(undefined);
 
@@ -64,22 +66,38 @@ const useFieldType = <T extends unknown>(options: Options): FieldType<T> => {
       fieldToDispatch.valid = validationResult;
     }
 
-    dispatchFields(fieldToDispatch);
-  }, [path, dispatchFields, validate, disableFormData, ignoreWhileFlattening, initialValue, stringify, condition]);
+    if (typeof dispatchFields === 'function') {
+      dispatchFields(fieldToDispatch);
+    }
+  }, [
+    path,
+    dispatchFields,
+    validate,
+    disableFormData,
+    ignoreWhileFlattening,
+    initialValue,
+    stringify,
+    condition
+  ]);
 
   // Method to return from `useFieldType`, used to
   // update internal field values from field component(s)
   // as fast as they arrive. NOTE - this method is NOT debounced
   const setValue = useCallback((e, modifyForm = true) => {
     const val = (e && e.target) ? e.target.value : e;
-    console.log(val);
 
     if ((!ignoreWhileFlattening && !modified) && modifyForm) {
-      setModified(true);
+      if (typeof setModified === 'function') {
+        setModified(true);
+      }
     }
 
     setInternalValue(val);
-  }, [setModified, modified, ignoreWhileFlattening]);
+  }, [
+    setModified,
+    modified,
+    ignoreWhileFlattening
+  ]);
 
   useEffect(() => {
     setInternalValue(initialValue);
@@ -95,7 +113,11 @@ const useFieldType = <T extends unknown>(options: Options): FieldType<T> => {
     if (field?.value !== valueToSend && valueToSend !== undefined) {
       sendField(valueToSend);
     }
-  }, [valueToSend, sendField, field]);
+  }, [
+    valueToSend,
+    sendField,
+    field
+  ]);
 
   return {
     ...options,