From 3436e6173fb9f17ecf789ba0cae7da865ca4b8b2 Mon Sep 17 00:00:00 2001
From: Jacob Fletcher <jacobsfletch@gmail.com>
Date: Mon, 22 Nov 2021 08:50:48 -0500
Subject: [PATCH 1/3] wip: custom onchange events for text, select, and upload
 fields

---
 .../components/fields/Select/Field/index.tsx  | 27 ++++++++++
 .../components/fields/Text/Field/index.tsx    | 29 ++++++++++
 .../components/fields/Upload/Field/index.tsx  | 29 ++++++++++
 demo/collections/CustomComponents/index.ts    | 53 ++++++++++++++++++-
 .../forms/field-types/Select/index.tsx        | 48 ++++++++++++-----
 .../forms/field-types/Text/index.tsx          | 23 +++++++-
 .../forms/field-types/Upload/index.tsx        | 28 ++++++++--
 .../components/forms/useFieldType/index.tsx   |  1 +
 src/fields/config/types.ts                    | 50 +++++++++--------
 9 files changed, 246 insertions(+), 42 deletions(-)
 create mode 100644 demo/collections/CustomComponents/components/fields/Select/Field/index.tsx
 create mode 100644 demo/collections/CustomComponents/components/fields/Text/Field/index.tsx
 create mode 100644 demo/collections/CustomComponents/components/fields/Upload/Field/index.tsx

diff --git a/demo/collections/CustomComponents/components/fields/Select/Field/index.tsx b/demo/collections/CustomComponents/components/fields/Select/Field/index.tsx
new file mode 100644
index 0000000000..f5ca7cdb96
--- /dev/null
+++ b/demo/collections/CustomComponents/components/fields/Select/Field/index.tsx
@@ -0,0 +1,27 @@
+import React, { useState } from 'react';
+import SelectInput from '../../../../../../../src/admin/components/forms/field-types/Select';
+import { Props as SelectFieldType } from '../../../../../../../src/admin/components/forms/field-types/Select/types';
+
+const Select: React.FC<SelectFieldType> = (props) => {
+  const {
+    path,
+    name,
+    label,
+    options
+  } = props;
+
+  const [internalValue, setInternalValue] = useState('');
+
+  return (
+    <SelectInput
+      path={path}
+      name={name}
+      label={label}
+      options={options}
+      value={internalValue}
+      onChange={setInternalValue}
+    />
+  )
+};
+
+export default Select;
diff --git a/demo/collections/CustomComponents/components/fields/Text/Field/index.tsx b/demo/collections/CustomComponents/components/fields/Text/Field/index.tsx
new file mode 100644
index 0000000000..b5af293cdc
--- /dev/null
+++ b/demo/collections/CustomComponents/components/fields/Text/Field/index.tsx
@@ -0,0 +1,29 @@
+import React, { useCallback, useState } from 'react';
+import TextInput from '../../../../../../../src/admin/components/forms/field-types/Text';
+import { Props as TextFieldType } from '../../../../../../../src/admin/components/forms/field-types/Text/types';
+
+const Text: React.FC<TextFieldType> = (props) => {
+  const {
+    path,
+    name,
+    label
+  } = props;
+
+  const [internalValue, setInternalValue] = useState('');
+
+  const middleware = useCallback((incomingValue) => {
+    setInternalValue(`Hello, world: ${incomingValue}`)
+  }, [])
+
+  return (
+    <TextInput
+      path={path}
+      name={name}
+      label={label}
+      value={internalValue}
+      onChange={middleware}
+    />
+  )
+};
+
+export default Text;
diff --git a/demo/collections/CustomComponents/components/fields/Upload/Field/index.tsx b/demo/collections/CustomComponents/components/fields/Upload/Field/index.tsx
new file mode 100644
index 0000000000..6fe6a546bd
--- /dev/null
+++ b/demo/collections/CustomComponents/components/fields/Upload/Field/index.tsx
@@ -0,0 +1,29 @@
+import React, { useState } from 'react';
+import Upload from '../../../../../../../src/admin/components/forms/field-types/Upload';
+import { Props as UploadFieldType } from '../../../../../../../src/admin/components/forms/field-types/Upload/types';
+
+const Text: React.FC<UploadFieldType> = (props) => {
+  const {
+    path,
+    name,
+    label,
+    relationTo,
+    fieldTypes
+  } = props;
+
+  const [internalValue, setInternalValue] = useState('');
+
+  return (
+    <Upload
+      relationTo={relationTo}
+      fieldTypes={fieldTypes}
+      path={path}
+      name={name}
+      label={label}
+      value={internalValue}
+      onChange={setInternalValue}
+    />
+  )
+};
+
+export default Text;
diff --git a/demo/collections/CustomComponents/index.ts b/demo/collections/CustomComponents/index.ts
index 2320a8bc1a..495b78a563 100644
--- a/demo/collections/CustomComponents/index.ts
+++ b/demo/collections/CustomComponents/index.ts
@@ -1,5 +1,8 @@
 import { CollectionConfig } from '../../../src/collections/config/types';
 import DescriptionField from './components/fields/Description/Field';
+import TextField from './components/fields/Text/Field';
+import SelectField from './components/fields/Select/Field';
+import UploadField from './components/fields/Upload/Field';
 import DescriptionCell from './components/fields/Description/Cell';
 import DescriptionFilter from './components/fields/Description/Filter';
 import NestedArrayField from './components/fields/NestedArrayCustomField/Field';
@@ -25,11 +28,59 @@ const CustomComponents: CollectionConfig = {
       unique: true,
       localized: true,
     },
+    {
+      name: 'text',
+      label: 'Text',
+      type: 'text',
+      required: true,
+      localized: true,
+      admin: {
+        components: {
+          Field: TextField,
+        },
+      },
+    },
+    {
+      name: 'select',
+      label: 'Select',
+      type: 'select',
+      localized: true,
+      options: [
+        {
+          label: 'Option 1',
+          value: '1',
+        },
+        {
+          label: 'Option 2',
+          value: '2',
+        },
+        {
+          label: 'Option 3',
+          value: '3',
+        },
+      ],
+      admin: {
+        components: {
+          Field: SelectField,
+        },
+      },
+    },
+    {
+      name: 'upload',
+      label: 'Upload',
+      type: 'upload',
+      relationTo: 'media',
+      localized: true,
+      admin: {
+        components: {
+          Field: UploadField,
+        },
+      },
+    },
     {
       name: 'description',
       label: 'Description',
       type: 'textarea',
-      required: true,
       localized: true,
       admin: {
         components: {
diff --git a/src/admin/components/forms/field-types/Select/index.tsx b/src/admin/components/forms/field-types/Select/index.tsx
index 097da0f50f..fb946595e6 100644
--- a/src/admin/components/forms/field-types/Select/index.tsx
+++ b/src/admin/components/forms/field-types/Select/index.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useState, useEffect } from 'react';
 import withCondition from '../../withCondition';
 import ReactSelect from '../../../elements/ReactSelect';
 import useFieldType from '../../useFieldType';
@@ -40,6 +40,8 @@ const Select: React.FC<Props> = (props) => {
       description,
       condition,
     } = {},
+    value: valueFromProps,
+    onChange: onChangeFromProps
   } = props;
 
   const path = pathFromProps || name;
@@ -62,6 +64,38 @@ const Select: React.FC<Props> = (props) => {
     condition,
   });
 
+  const onChange = useCallback((selectedOption) => {
+    if (!readOnly) {
+      let newValue;
+      if (hasMany) {
+        if (Array.isArray(selectedOption)) {
+          newValue = selectedOption.map((option) => option.value);
+        } else {
+          newValue = [];
+        }
+      } else {
+        newValue = selectedOption.value;
+      }
+
+      if (typeof onChangeFromProps === 'function') {
+        onChangeFromProps(newValue);
+      } else {
+        setValue(newValue);
+      }
+    }
+  }, [
+    readOnly,
+    hasMany,
+    onChangeFromProps,
+    setValue
+  ])
+
+  useEffect(() => {
+    if (typeof valueFromProps === 'string') {
+      setValue(valueFromProps);
+    }
+  }, [valueFromProps])
+
   const classes = [
     'field-type',
     baseClass,
@@ -95,17 +129,7 @@ const Select: React.FC<Props> = (props) => {
         required={required}
       />
       <ReactSelect
-        onChange={!readOnly ? (selectedOption) => {
-          if (hasMany) {
-            if (Array.isArray(selectedOption)) {
-              setValue(selectedOption.map((option) => option.value));
-            } else {
-              setValue([]);
-            }
-          } else {
-            setValue(selectedOption.value);
-          }
-        } : undefined}
+        onChange={onChange}
         value={valueToRender}
         showError={showError}
         isDisabled={readOnly}
diff --git a/src/admin/components/forms/field-types/Text/index.tsx b/src/admin/components/forms/field-types/Text/index.tsx
index 1854ca7d9b..d41b71f0d2 100644
--- a/src/admin/components/forms/field-types/Text/index.tsx
+++ b/src/admin/components/forms/field-types/Text/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback, useEffect } from 'react';
 import useFieldType from '../../useFieldType';
 import withCondition from '../../withCondition';
 import Label from '../../Label';
@@ -24,6 +24,8 @@ const Text: React.FC<Props> = (props) => {
       description,
       condition,
     } = {},
+    value: valueFromProps,
+    onChange: onChangeFromProps,
   } = props;
 
   const path = pathFromProps || name;
@@ -42,6 +44,23 @@ const Text: React.FC<Props> = (props) => {
     errorMessage,
   } = fieldType;
 
+  const onChange = useCallback((e) => {
+    const { value: incomingValue } = e.target;
+    setValue(e);
+    if (typeof onChangeFromProps === 'function') {
+      onChangeFromProps(incomingValue);
+    }
+  }, [
+    onChangeFromProps,
+    setValue,
+  ]);
+
+  useEffect(() => {
+    if (typeof valueFromProps === 'string') {
+      setValue(valueFromProps);
+    }
+  }, [valueFromProps])
+
   const classes = [
     'field-type',
     'text',
@@ -68,7 +87,7 @@ const Text: React.FC<Props> = (props) => {
       />
       <input
         value={value || ''}
-        onChange={setValue}
+        onChange={onChange}
         disabled={readOnly}
         placeholder={placeholder}
         type="text"
diff --git a/src/admin/components/forms/field-types/Upload/index.tsx b/src/admin/components/forms/field-types/Upload/index.tsx
index d687ef5551..a093f52d01 100644
--- a/src/admin/components/forms/field-types/Upload/index.tsx
+++ b/src/admin/components/forms/field-types/Upload/index.tsx
@@ -38,6 +38,8 @@ const Upload: React.FC<Props> = (props) => {
     validate = upload,
     relationTo,
     fieldTypes,
+    value: valueFromProps,
+    onChange: onChangeFromProps,
   } = props;
 
   const collection = collections.find((coll) => coll.slug === relationTo);
@@ -88,7 +90,25 @@ const Upload: React.FC<Props> = (props) => {
 
       fetchFile();
     }
-  }, [value, setInternalValue, relationTo, api, serverURL, setValue]);
+  }, [
+    value,
+    setInternalValue,
+    relationTo,
+    api,
+    serverURL,
+    setValue
+  ]);
+
+  useEffect(() => {
+    const { id: incomingID } = internalValue || {};
+    if (typeof onChangeFromProps === 'function') {
+      onChangeFromProps(incomingID)
+    } else {
+      setValue(incomingID);
+    }
+  }, [internalValue]);
+
+  const valueToUse = valueFromProps || value || '';
 
   return (
     <div
@@ -119,7 +139,7 @@ const Upload: React.FC<Props> = (props) => {
               }}
             />
           )}
-          {(!value || missingFile) && (
+          {(!valueToUse || missingFile) && (
             <div className={`${baseClass}__wrap`}>
               <Button
                 buttonStyle="secondary"
@@ -147,7 +167,6 @@ const Upload: React.FC<Props> = (props) => {
             fieldTypes,
             setValue: (val) => {
               setMissingFile(false);
-              setValue(val.id);
               setInternalValue(val);
             },
           }}
@@ -157,14 +176,13 @@ const Upload: React.FC<Props> = (props) => {
             slug: selectExistingModalSlug,
             setValue: (val) => {
               setMissingFile(false);
-              setValue(val.id);
               setInternalValue(val);
             },
             addModalSlug,
           }}
           />
           <FieldDescription
-            value={value}
+            value={valueToUse}
             description={description}
           />
         </React.Fragment>
diff --git a/src/admin/components/forms/useFieldType/index.tsx b/src/admin/components/forms/useFieldType/index.tsx
index 9de075b9f3..886b445670 100644
--- a/src/admin/components/forms/useFieldType/index.tsx
+++ b/src/admin/components/forms/useFieldType/index.tsx
@@ -72,6 +72,7 @@ const useFieldType = <T extends unknown>(options: Options): FieldType<T> => {
   // 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);
diff --git a/src/fields/config/types.ts b/src/fields/config/types.ts
index 91c4b4218d..f1f958ad28 100644
--- a/src/fields/config/types.ts
+++ b/src/fields/config/types.ts
@@ -100,6 +100,8 @@ export type TextField = FieldBase & {
     placeholder?: string
     autoComplete?: string
   }
+  value?: string
+  onChange?: (value: string) => void
 }
 
 export type EmailField = FieldBase & {
@@ -168,9 +170,11 @@ export type UIField = {
 }
 
 export type UploadField = FieldBase & {
-  type: 'upload';
-  relationTo: string;
-  maxDepth?: number;
+  type: 'upload'
+  relationTo: string
+  maxDepth?: number
+  value?: string
+  onChange?: (value: string) => void
 }
 
 type CodeAdmin = Admin & {
@@ -185,9 +189,11 @@ export type CodeField = Omit<FieldBase, 'admin'> & {
 }
 
 export type SelectField = FieldBase & {
-  type: 'select';
-  options: Option[];
-  hasMany?: boolean;
+  type: 'select'
+  options: Option[]
+  hasMany?: boolean
+  value?: string
+  onChange?: (value: string) => void
 }
 
 export type RelationshipField = FieldBase & {
@@ -302,22 +308,22 @@ export type FieldAffectingData =
   | PointField
 
 export type NonPresentationalField = TextField
-| NumberField
-| EmailField
-| TextareaField
-| CheckboxField
-| DateField
-| BlockField
-| GroupField
-| RadioField
-| RelationshipField
-| ArrayField
-| RichTextField
-| SelectField
-| UploadField
-| CodeField
-| PointField
-| RowField;
+  | NumberField
+  | EmailField
+  | TextareaField
+  | CheckboxField
+  | DateField
+  | BlockField
+  | GroupField
+  | RadioField
+  | RelationshipField
+  | ArrayField
+  | RichTextField
+  | SelectField
+  | UploadField
+  | CodeField
+  | PointField
+  | RowField;
 
 export type FieldWithPath = Field & {
   path?: string

From 4affdc3a9397d70f5baacdd12753c8fc8c7d8368 Mon Sep 17 00:00:00 2001
From: Jacob Fletcher <jacobsfletch@gmail.com>
Date: Wed, 24 Nov 2021 15:28:41 -0500
Subject: [PATCH 2/3] feat: supports custom onChange handling in text, select,
 and upload fields

---
 .../components/fields/Select/Field/index.tsx  | 38 ++++++++++++--
 .../components/fields/Text/Field/index.tsx    | 18 ++++---
 .../components/fields/UI/Field/index.tsx      | 50 +++++++++++++++++++
 .../components/fields/Upload/Field/index.tsx  | 19 +++++--
 demo/collections/CustomComponents/index.ts    | 15 +++++-
 .../forms/field-types/Select/index.tsx        | 10 ++--
 .../forms/field-types/Text/index.tsx          | 15 +++---
 .../forms/field-types/Upload/index.tsx        | 12 ++---
 .../components/forms/useFieldType/index.tsx   | 38 +++++++++++---
 9 files changed, 166 insertions(+), 49 deletions(-)
 create mode 100644 demo/collections/CustomComponents/components/fields/UI/Field/index.tsx

diff --git a/demo/collections/CustomComponents/components/fields/Select/Field/index.tsx b/demo/collections/CustomComponents/components/fields/Select/Field/index.tsx
index f5ca7cdb96..5ae50e17ea 100644
--- a/demo/collections/CustomComponents/components/fields/Select/Field/index.tsx
+++ b/demo/collections/CustomComponents/components/fields/Select/Field/index.tsx
@@ -1,6 +1,7 @@
-import React, { useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import SelectInput from '../../../../../../../src/admin/components/forms/field-types/Select';
 import { Props as SelectFieldType } from '../../../../../../../src/admin/components/forms/field-types/Select/types';
+import useFieldType from '../../../../../../../src/admin/components/forms/useFieldType';
 
 const Select: React.FC<SelectFieldType> = (props) => {
   const {
@@ -10,16 +11,43 @@ const Select: React.FC<SelectFieldType> = (props) => {
     options
   } = props;
 
-  const [internalValue, setInternalValue] = useState('');
+  const {
+    value,
+    setValue
+  } = useFieldType({
+    path
+  });
+
+  const onChange = useCallback((incomingValue) => {
+    const sendToCRM = async () => {
+      try {
+        const req = await fetch('https://fake-crm.com', {
+          method: 'post',
+          body: JSON.stringify({
+            someKey: incomingValue
+          })
+        });
+
+        const res = await req.json();
+        if (res.ok) {
+          console.log('Successfully synced to CRM.')
+        }
+      } catch (e) {
+        console.error(e);
+      }
+    }
+
+    sendToCRM();
+    setValue(incomingValue)
+  }, [])
 
   return (
     <SelectInput
-      path={path}
       name={name}
       label={label}
       options={options}
-      value={internalValue}
-      onChange={setInternalValue}
+      value={value as string}
+      onChange={onChange}
     />
   )
 };
diff --git a/demo/collections/CustomComponents/components/fields/Text/Field/index.tsx b/demo/collections/CustomComponents/components/fields/Text/Field/index.tsx
index b5af293cdc..2c8d2bdb71 100644
--- a/demo/collections/CustomComponents/components/fields/Text/Field/index.tsx
+++ b/demo/collections/CustomComponents/components/fields/Text/Field/index.tsx
@@ -1,6 +1,7 @@
 import React, { useCallback, useState } from 'react';
 import TextInput from '../../../../../../../src/admin/components/forms/field-types/Text';
 import { Props as TextFieldType } from '../../../../../../../src/admin/components/forms/field-types/Text/types';
+import useFieldType from '../../../../../../../src/admin/components/forms/useFieldType';
 
 const Text: React.FC<TextFieldType> = (props) => {
   const {
@@ -9,19 +10,24 @@ const Text: React.FC<TextFieldType> = (props) => {
     label
   } = props;
 
-  const [internalValue, setInternalValue] = useState('');
+  const {
+    value,
+    setValue
+  } = useFieldType({
+    path
+  });
 
-  const middleware = useCallback((incomingValue) => {
-    setInternalValue(`Hello, world: ${incomingValue}`)
+  const onChange = useCallback((incomingValue) => {
+    const valueWithoutSpaces = incomingValue.replace(/\s/g, '');
+    setValue(valueWithoutSpaces)
   }, [])
 
   return (
     <TextInput
-      path={path}
       name={name}
       label={label}
-      value={internalValue}
-      onChange={middleware}
+      value={value as string}
+      onChange={onChange}
     />
   )
 };
diff --git a/demo/collections/CustomComponents/components/fields/UI/Field/index.tsx b/demo/collections/CustomComponents/components/fields/UI/Field/index.tsx
new file mode 100644
index 0000000000..dd56f4d6f7
--- /dev/null
+++ b/demo/collections/CustomComponents/components/fields/UI/Field/index.tsx
@@ -0,0 +1,50 @@
+import React, { useCallback } from 'react';
+import TextInput from '../../../../../../../src/admin/components/forms/field-types/Text';
+import { UIField as UIFieldType } from '../../../../../../../src/fields/config/types';
+import SelectInput from '../../../../../../../src/admin/components/forms/field-types/Select';
+
+const UIField: React.FC<UIFieldType> = () => {
+  const [textValue, setTextValue] = React.useState('');
+  const [selectValue, setSelectValue] = React.useState('');
+
+  const onTextChange = useCallback((incomingValue) => {
+    setTextValue(incomingValue);
+  }, [])
+
+  const onSelectChange = useCallback((incomingValue) => {
+    setSelectValue(incomingValue);
+  }, [])
+
+  return (
+    <div>
+      <TextInput
+        name="ui-text"
+        label="Presentation-only text field (does not submit)"
+        value={textValue as string}
+        onChange={onTextChange}
+      />
+      <SelectInput
+        name="ui-select"
+        label="Presentation-only select field (does not submit)"
+        options={[
+          {
+            label: 'Option 1',
+            value: 'option-1'
+          },
+          {
+            label: 'Option 2',
+            value: 'option-2'
+          },
+          {
+            label: 'Option 3',
+            value: 'option-4'
+          }
+        ]}
+        value={selectValue as string}
+        onChange={onSelectChange}
+      />
+    </div>
+  )
+};
+
+export default UIField;
diff --git a/demo/collections/CustomComponents/components/fields/Upload/Field/index.tsx b/demo/collections/CustomComponents/components/fields/Upload/Field/index.tsx
index 6fe6a546bd..9f6d00d29e 100644
--- a/demo/collections/CustomComponents/components/fields/Upload/Field/index.tsx
+++ b/demo/collections/CustomComponents/components/fields/Upload/Field/index.tsx
@@ -1,6 +1,7 @@
-import React, { useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import Upload from '../../../../../../../src/admin/components/forms/field-types/Upload';
 import { Props as UploadFieldType } from '../../../../../../../src/admin/components/forms/field-types/Upload/types';
+import useFieldType from '../../../../../../../src/admin/components/forms/useFieldType';
 
 const Text: React.FC<UploadFieldType> = (props) => {
   const {
@@ -11,17 +12,25 @@ const Text: React.FC<UploadFieldType> = (props) => {
     fieldTypes
   } = props;
 
-  const [internalValue, setInternalValue] = useState('');
+  const {
+    value,
+    setValue
+  } = useFieldType({
+    path
+  });
+
+  const onChange = useCallback((incomingValue) => {
+    setValue(incomingValue)
+  }, [])
 
   return (
     <Upload
       relationTo={relationTo}
       fieldTypes={fieldTypes}
-      path={path}
       name={name}
       label={label}
-      value={internalValue}
-      onChange={setInternalValue}
+      value={value as string}
+      onChange={onChange}
     />
   )
 };
diff --git a/demo/collections/CustomComponents/index.ts b/demo/collections/CustomComponents/index.ts
index 495b78a563..e09ef5ae1f 100644
--- a/demo/collections/CustomComponents/index.ts
+++ b/demo/collections/CustomComponents/index.ts
@@ -9,6 +9,7 @@ import NestedArrayField from './components/fields/NestedArrayCustomField/Field';
 import GroupField from './components/fields/Group/Field';
 import NestedGroupField from './components/fields/NestedGroupCustomField/Field';
 import NestedText1Field from './components/fields/NestedText1/Field';
+import UIField from './components/fields/UI/Field';
 import ListView from './components/views/List';
 import CustomDescriptionComponent from '../../customComponents/Description';
 
@@ -30,7 +31,7 @@ const CustomComponents: CollectionConfig = {
     },
     {
       name: 'text',
-      label: 'Text',
+      label: 'Custom text field (removes whitespace)',
       type: 'text',
       required: true,
       localized: true,
@@ -42,7 +43,7 @@ const CustomComponents: CollectionConfig = {
     },
     {
       name: 'select',
-      label: 'Select',
+      label: 'Custom select field (sends value to crm)',
       type: 'select',
       localized: true,
       options: [
@@ -65,6 +66,16 @@ const CustomComponents: CollectionConfig = {
         },
       },
     },
+    {
+      name: 'ui',
+      label: 'UI',
+      type: 'ui',
+      admin: {
+        components: {
+          Field: UIField,
+        },
+      },
+    },
     {
       name: 'upload',
       label: 'Upload',
diff --git a/src/admin/components/forms/field-types/Select/index.tsx b/src/admin/components/forms/field-types/Select/index.tsx
index fb946595e6..1aa6f06b3d 100644
--- a/src/admin/components/forms/field-types/Select/index.tsx
+++ b/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 {
diff --git a/src/admin/components/forms/field-types/Text/index.tsx b/src/admin/components/forms/field-types/Text/index.tsx
index d41b71f0d2..be60e6c376 100644
--- a/src/admin/components/forms/field-types/Text/index.tsx
+++ b/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}
diff --git a/src/admin/components/forms/field-types/Upload/index.tsx b/src/admin/components/forms/field-types/Upload/index.tsx
index a093f52d01..e08c41da14 100644
--- a/src/admin/components/forms/field-types/Upload/index.tsx
+++ b/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>
diff --git a/src/admin/components/forms/useFieldType/index.tsx b/src/admin/components/forms/useFieldType/index.tsx
index 886b445670..a186de6c63 100644
--- a/src/admin/components/forms/useFieldType/index.tsx
+++ b/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,

From 0245747020c7c039b15d055f54a4548a364d047e Mon Sep 17 00:00:00 2001
From: Jacob Fletcher <jacobsfletch@gmail.com>
Date: Wed, 24 Nov 2021 15:37:36 -0500
Subject: [PATCH 3/3] feat: renames useFieldType to useField

---
 components/forms.ts                                       | 3 ++-
 .../components/fields/Select/Field/index.tsx              | 4 ++--
 .../components/fields/Text/Field/index.tsx                | 4 ++--
 .../components/fields/Upload/Field/index.tsx              | 4 ++--
 docs/admin/components.mdx                                 | 6 +++---
 .../forms/DraggableSection/SectionTitle/index.tsx         | 4 ++--
 src/admin/components/forms/field-types/Array/Array.tsx    | 4 ++--
 src/admin/components/forms/field-types/Blocks/Blocks.tsx  | 6 +++---
 src/admin/components/forms/field-types/Checkbox/index.tsx | 4 ++--
 src/admin/components/forms/field-types/Code/Code.tsx      | 4 ++--
 .../forms/field-types/ConfirmPassword/index.tsx           | 4 ++--
 src/admin/components/forms/field-types/DateTime/index.tsx | 4 ++--
 src/admin/components/forms/field-types/Email/index.tsx    | 4 ++--
 .../components/forms/field-types/HiddenInput/index.tsx    | 4 ++--
 src/admin/components/forms/field-types/Number/index.tsx   | 4 ++--
 src/admin/components/forms/field-types/Password/index.tsx | 4 ++--
 src/admin/components/forms/field-types/Point/index.tsx    | 4 ++--
 .../components/forms/field-types/RadioGroup/index.tsx     | 4 ++--
 .../components/forms/field-types/Relationship/index.tsx   | 4 ++--
 .../components/forms/field-types/RichText/RichText.tsx    | 8 ++++----
 src/admin/components/forms/field-types/Select/index.tsx   | 4 ++--
 src/admin/components/forms/field-types/Text/index.tsx     | 4 ++--
 src/admin/components/forms/field-types/Textarea/index.tsx | 4 ++--
 src/admin/components/forms/field-types/Upload/index.tsx   | 4 ++--
 .../components/forms/{useFieldType => useField}/index.tsx | 6 +++---
 .../components/forms/{useFieldType => useField}/types.ts  | 0
 .../components/views/collections/Edit/Auth/APIKey.tsx     | 4 ++--
 .../components/views/collections/Edit/Upload/index.tsx    | 4 ++--
 28 files changed, 59 insertions(+), 58 deletions(-)
 rename src/admin/components/forms/{useFieldType => useField}/index.tsx (95%)
 rename src/admin/components/forms/{useFieldType => useField}/types.ts (100%)

diff --git a/components/forms.ts b/components/forms.ts
index 39abf0bfb2..ba81e00716 100644
--- a/components/forms.ts
+++ b/components/forms.ts
@@ -6,7 +6,8 @@ export {
   useFormModified,
 } from '../dist/admin/components/forms/Form/context';
 
-export { default as useFieldType } from '../dist/admin/components/forms/useFieldType';
+export { default as useField } from '../dist/admin/components/forms/useField';
+export { default as useFieldType } from '../dist/admin/components/forms/useField';
 
 export { default as Form } from '../dist/admin/components/forms/Form';
 
diff --git a/demo/collections/CustomComponents/components/fields/Select/Field/index.tsx b/demo/collections/CustomComponents/components/fields/Select/Field/index.tsx
index 5ae50e17ea..e3c35481ef 100644
--- a/demo/collections/CustomComponents/components/fields/Select/Field/index.tsx
+++ b/demo/collections/CustomComponents/components/fields/Select/Field/index.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback, useState } from 'react';
 import SelectInput from '../../../../../../../src/admin/components/forms/field-types/Select';
 import { Props as SelectFieldType } from '../../../../../../../src/admin/components/forms/field-types/Select/types';
-import useFieldType from '../../../../../../../src/admin/components/forms/useFieldType';
+import useField from '../../../../../../../src/admin/components/forms/useField';
 
 const Select: React.FC<SelectFieldType> = (props) => {
   const {
@@ -14,7 +14,7 @@ const Select: React.FC<SelectFieldType> = (props) => {
   const {
     value,
     setValue
-  } = useFieldType({
+  } = useField({
     path
   });
 
diff --git a/demo/collections/CustomComponents/components/fields/Text/Field/index.tsx b/demo/collections/CustomComponents/components/fields/Text/Field/index.tsx
index 2c8d2bdb71..580486d2cf 100644
--- a/demo/collections/CustomComponents/components/fields/Text/Field/index.tsx
+++ b/demo/collections/CustomComponents/components/fields/Text/Field/index.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback, useState } from 'react';
 import TextInput from '../../../../../../../src/admin/components/forms/field-types/Text';
 import { Props as TextFieldType } from '../../../../../../../src/admin/components/forms/field-types/Text/types';
-import useFieldType from '../../../../../../../src/admin/components/forms/useFieldType';
+import useField from '../../../../../../../src/admin/components/forms/useField';
 
 const Text: React.FC<TextFieldType> = (props) => {
   const {
@@ -13,7 +13,7 @@ const Text: React.FC<TextFieldType> = (props) => {
   const {
     value,
     setValue
-  } = useFieldType({
+  } = useField({
     path
   });
 
diff --git a/demo/collections/CustomComponents/components/fields/Upload/Field/index.tsx b/demo/collections/CustomComponents/components/fields/Upload/Field/index.tsx
index 9f6d00d29e..dd5b0f4967 100644
--- a/demo/collections/CustomComponents/components/fields/Upload/Field/index.tsx
+++ b/demo/collections/CustomComponents/components/fields/Upload/Field/index.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback, useState } from 'react';
 import Upload from '../../../../../../../src/admin/components/forms/field-types/Upload';
 import { Props as UploadFieldType } from '../../../../../../../src/admin/components/forms/field-types/Upload/types';
-import useFieldType from '../../../../../../../src/admin/components/forms/useFieldType';
+import useField from '../../../../../../../src/admin/components/forms/useField';
 
 const Text: React.FC<UploadFieldType> = (props) => {
   const {
@@ -15,7 +15,7 @@ const Text: React.FC<UploadFieldType> = (props) => {
   const {
     value,
     setValue
-  } = useFieldType({
+  } = useField({
     path
   });
 
diff --git a/docs/admin/components.mdx b/docs/admin/components.mdx
index 95aadf323e..9c24fb07f4 100644
--- a/docs/admin/components.mdx
+++ b/docs/admin/components.mdx
@@ -90,13 +90,13 @@ All Payload fields support the ability to swap in your own React components. So,
 
 #### Sending and receiving values from the form
 
-When swapping out the `Field` component, you'll be responsible for sending and receiving the field's `value` from the form itself. To do so, import the `useFieldType` hook as follows:
+When swapping out the `Field` component, you'll be responsible for sending and receiving the field's `value` from the form itself. To do so, import the `useField` hook as follows:
 
 ```js
-import { useFieldType } from 'payload/components/forms';
+import { useField } from 'payload/components/forms';
 
 const CustomTextField = ({ path }) => {
-  const { value, setValue } = useFieldType({ path });
+  const { value, setValue } = useField({ path });
 
   return (
     <input
diff --git a/src/admin/components/forms/DraggableSection/SectionTitle/index.tsx b/src/admin/components/forms/DraggableSection/SectionTitle/index.tsx
index 7145825598..f1fe7ca3ce 100644
--- a/src/admin/components/forms/DraggableSection/SectionTitle/index.tsx
+++ b/src/admin/components/forms/DraggableSection/SectionTitle/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import useFieldType from '../../useFieldType';
+import useField from '../../useField';
 import Pill from '../../../elements/Pill';
 import { Props } from './types';
 
@@ -10,7 +10,7 @@ const baseClass = 'section-title';
 const SectionTitle: React.FC<Props> = (props) => {
   const { label, path, readOnly } = props;
 
-  const { value, setValue } = useFieldType({ path });
+  const { value, setValue } = useField({ path });
 
   const classes = [
     baseClass,
diff --git a/src/admin/components/forms/field-types/Array/Array.tsx b/src/admin/components/forms/field-types/Array/Array.tsx
index a51001e277..be2d940073 100644
--- a/src/admin/components/forms/field-types/Array/Array.tsx
+++ b/src/admin/components/forms/field-types/Array/Array.tsx
@@ -7,7 +7,7 @@ import DraggableSection from '../../DraggableSection';
 import reducer from '../rowReducer';
 import { useForm } from '../../Form/context';
 import buildStateFromSchema from '../../Form/buildStateFromSchema';
-import useFieldType from '../../useFieldType';
+import useField from '../../useField';
 import Error from '../../Error';
 import { array } from '../../../../../fields/validations';
 import Banner from '../../../elements/Banner';
@@ -66,7 +66,7 @@ const ArrayFieldType: React.FC<Props> = (props) => {
     errorMessage,
     value,
     setValue,
-  } = useFieldType({
+  } = useField({
     path,
     validate: memoizedValidate,
     disableFormData,
diff --git a/src/admin/components/forms/field-types/Blocks/Blocks.tsx b/src/admin/components/forms/field-types/Blocks/Blocks.tsx
index 7cc49cd83a..d6a18f20ce 100644
--- a/src/admin/components/forms/field-types/Blocks/Blocks.tsx
+++ b/src/admin/components/forms/field-types/Blocks/Blocks.tsx
@@ -12,7 +12,7 @@ import { useForm } from '../../Form/context';
 import buildStateFromSchema from '../../Form/buildStateFromSchema';
 import DraggableSection from '../../DraggableSection';
 import Error from '../../Error';
-import useFieldType from '../../useFieldType';
+import useField from '../../useField';
 import Popup from '../../../elements/Popup';
 import BlockSelector from './BlockSelector';
 import { blocks as blocksValidator } from '../../../../../fields/validations';
@@ -76,7 +76,7 @@ const Blocks: React.FC<Props> = (props) => {
     errorMessage,
     value,
     setValue,
-  } = useFieldType({
+  } = useField({
     path,
     validate: memoizedValidate,
     disableFormData,
@@ -110,7 +110,7 @@ const Blocks: React.FC<Props> = (props) => {
 
     if (preferencesKey) {
       const preferences: DocumentPreferences = await getPreference(preferencesKey);
-      const preferencesToSet = preferences || { fields: { } };
+      const preferencesToSet = preferences || { fields: {} };
       let newCollapsedState = preferencesToSet?.fields?.[path]?.collapsed
         .filter((filterID) => (rows.find((row) => row.id === filterID)))
         || [];
diff --git a/src/admin/components/forms/field-types/Checkbox/index.tsx b/src/admin/components/forms/field-types/Checkbox/index.tsx
index d49342318c..4bf44687b5 100644
--- a/src/admin/components/forms/field-types/Checkbox/index.tsx
+++ b/src/admin/components/forms/field-types/Checkbox/index.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react';
-import useFieldType from '../../useFieldType';
+import useField from '../../useField';
 import withCondition from '../../withCondition';
 import Error from '../../Error';
 import { checkbox } from '../../../../../fields/validations';
@@ -41,7 +41,7 @@ const Checkbox: React.FC<Props> = (props) => {
     showError,
     errorMessage,
     setValue,
-  } = useFieldType({
+  } = useField({
     path,
     validate: memoizedValidate,
     disableFormData,
diff --git a/src/admin/components/forms/field-types/Code/Code.tsx b/src/admin/components/forms/field-types/Code/Code.tsx
index 5c4f4b2acd..bf6c0db10c 100644
--- a/src/admin/components/forms/field-types/Code/Code.tsx
+++ b/src/admin/components/forms/field-types/Code/Code.tsx
@@ -3,7 +3,7 @@ import Editor from 'react-simple-code-editor';
 import { highlight, languages } from 'prismjs/components/prism-core';
 import 'prismjs/components/prism-clike';
 import 'prismjs/components/prism-javascript';
-import useFieldType from '../../useFieldType';
+import useField from '../../useField';
 import withCondition from '../../withCondition';
 import Label from '../../Label';
 import Error from '../../Error';
@@ -52,7 +52,7 @@ const Code: React.FC<Props> = (props) => {
     showError,
     setValue,
     errorMessage,
-  } = useFieldType({
+  } = useField({
     path,
     validate: memoizedValidate,
     enableDebouncedValue: true,
diff --git a/src/admin/components/forms/field-types/ConfirmPassword/index.tsx b/src/admin/components/forms/field-types/ConfirmPassword/index.tsx
index ede7f5b335..3428f2fb2c 100644
--- a/src/admin/components/forms/field-types/ConfirmPassword/index.tsx
+++ b/src/admin/components/forms/field-types/ConfirmPassword/index.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react';
-import useFieldType from '../../useFieldType';
+import useField from '../../useField';
 import Label from '../../Label';
 import Error from '../../Error';
 import { useWatchForm } from '../../Form/context';
@@ -23,7 +23,7 @@ const ConfirmPassword: React.FC = () => {
     showError,
     setValue,
     errorMessage,
-  } = useFieldType({
+  } = useField({
     path: 'confirm-password',
     disableFormData: true,
     validate,
diff --git a/src/admin/components/forms/field-types/DateTime/index.tsx b/src/admin/components/forms/field-types/DateTime/index.tsx
index cebb44ebdd..1e17e22bb2 100644
--- a/src/admin/components/forms/field-types/DateTime/index.tsx
+++ b/src/admin/components/forms/field-types/DateTime/index.tsx
@@ -2,7 +2,7 @@ import React, { useCallback } from 'react';
 
 import DatePicker from '../../../elements/DatePicker';
 import withCondition from '../../withCondition';
-import useFieldType from '../../useFieldType';
+import useField from '../../useField';
 import Label from '../../Label';
 import Error from '../../Error';
 import FieldDescription from '../../FieldDescription';
@@ -43,7 +43,7 @@ const DateTime: React.FC<Props> = (props) => {
     showError,
     errorMessage,
     setValue,
-  } = useFieldType({
+  } = useField({
     path,
     validate: memoizedValidate,
     condition,
diff --git a/src/admin/components/forms/field-types/Email/index.tsx b/src/admin/components/forms/field-types/Email/index.tsx
index e857da0980..91979c3b6e 100644
--- a/src/admin/components/forms/field-types/Email/index.tsx
+++ b/src/admin/components/forms/field-types/Email/index.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react';
 import withCondition from '../../withCondition';
-import useFieldType from '../../useFieldType';
+import useField from '../../useField';
 import Label from '../../Label';
 import Error from '../../Error';
 import FieldDescription from '../../FieldDescription';
@@ -34,7 +34,7 @@ const Email: React.FC<Props> = (props) => {
     return validationResult;
   }, [validate, required]);
 
-  const fieldType = useFieldType({
+  const fieldType = useField({
     path,
     validate: memoizedValidate,
     enableDebouncedValue: true,
diff --git a/src/admin/components/forms/field-types/HiddenInput/index.tsx b/src/admin/components/forms/field-types/HiddenInput/index.tsx
index 2ae0af77ef..318cd7a250 100644
--- a/src/admin/components/forms/field-types/HiddenInput/index.tsx
+++ b/src/admin/components/forms/field-types/HiddenInput/index.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import useFieldType from '../../useFieldType';
+import useField from '../../useField';
 import withCondition from '../../withCondition';
 import { Props } from './types';
 
@@ -13,7 +13,7 @@ const HiddenInput: React.FC<Props> = (props) => {
 
   const path = pathFromProps || name;
 
-  const { value, setValue } = useFieldType({
+  const { value, setValue } = useField({
     path,
   });
 
diff --git a/src/admin/components/forms/field-types/Number/index.tsx b/src/admin/components/forms/field-types/Number/index.tsx
index f0af81f922..cb8b4c01ca 100644
--- a/src/admin/components/forms/field-types/Number/index.tsx
+++ b/src/admin/components/forms/field-types/Number/index.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react';
-import useFieldType from '../../useFieldType';
+import useField from '../../useField';
 import Label from '../../Label';
 import Error from '../../Error';
 import FieldDescription from '../../FieldDescription';
@@ -41,7 +41,7 @@ const NumberField: React.FC<Props> = (props) => {
     showError,
     setValue,
     errorMessage,
-  } = useFieldType({
+  } = useField({
     path,
     validate: memoizedValidate,
     enableDebouncedValue: true,
diff --git a/src/admin/components/forms/field-types/Password/index.tsx b/src/admin/components/forms/field-types/Password/index.tsx
index e26a585d86..5bafb357d4 100644
--- a/src/admin/components/forms/field-types/Password/index.tsx
+++ b/src/admin/components/forms/field-types/Password/index.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react';
-import useFieldType from '../../useFieldType';
+import useField from '../../useField';
 import Label from '../../Label';
 import Error from '../../Error';
 import withCondition from '../../withCondition';
@@ -33,7 +33,7 @@ const Password: React.FC<Props> = (props) => {
     formProcessing,
     setValue,
     errorMessage,
-  } = useFieldType({
+  } = useField({
     path,
     validate: memoizedValidate,
     enableDebouncedValue: true,
diff --git a/src/admin/components/forms/field-types/Point/index.tsx b/src/admin/components/forms/field-types/Point/index.tsx
index 62f0cc1759..2bdfd89406 100644
--- a/src/admin/components/forms/field-types/Point/index.tsx
+++ b/src/admin/components/forms/field-types/Point/index.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react';
-import useFieldType from '../../useFieldType';
+import useField from '../../useField';
 import Label from '../../Label';
 import Error from '../../Error';
 import FieldDescription from '../../FieldDescription';
@@ -41,7 +41,7 @@ const PointField: React.FC<Props> = (props) => {
     showError,
     setValue,
     errorMessage,
-  } = useFieldType<[number, number]>({
+  } = useField<[number, number]>({
     path,
     validate: memoizedValidate,
     enableDebouncedValue: true,
diff --git a/src/admin/components/forms/field-types/RadioGroup/index.tsx b/src/admin/components/forms/field-types/RadioGroup/index.tsx
index e6aa893cd1..4e84db9d5d 100644
--- a/src/admin/components/forms/field-types/RadioGroup/index.tsx
+++ b/src/admin/components/forms/field-types/RadioGroup/index.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react';
 
-import useFieldType from '../../useFieldType';
+import useField from '../../useField';
 import withCondition from '../../withCondition';
 import Error from '../../Error';
 import Label from '../../Label';
@@ -44,7 +44,7 @@ const RadioGroup: React.FC<Props> = (props) => {
     showError,
     errorMessage,
     setValue,
-  } = useFieldType({
+  } = useField({
     path,
     validate: memoizedValidate,
     condition,
diff --git a/src/admin/components/forms/field-types/Relationship/index.tsx b/src/admin/components/forms/field-types/Relationship/index.tsx
index fcedde1c73..a7a0382358 100644
--- a/src/admin/components/forms/field-types/Relationship/index.tsx
+++ b/src/admin/components/forms/field-types/Relationship/index.tsx
@@ -5,7 +5,7 @@ import { useConfig } from '@payloadcms/config-provider';
 import withCondition from '../../withCondition';
 import ReactSelect from '../../../elements/ReactSelect';
 import { Value } from '../../../elements/ReactSelect/types';
-import useFieldType from '../../useFieldType';
+import useField from '../../useField';
 import Label from '../../Label';
 import Error from '../../Error';
 import FieldDescription from '../../FieldDescription';
@@ -70,7 +70,7 @@ const Relationship: React.FC<Props> = (props) => {
     showError,
     errorMessage,
     setValue,
-  } = useFieldType({
+  } = useField({
     path: path || name,
     validate: memoizedValidate,
     condition,
diff --git a/src/admin/components/forms/field-types/RichText/RichText.tsx b/src/admin/components/forms/field-types/RichText/RichText.tsx
index de1a8b8989..0d01ad5001 100644
--- a/src/admin/components/forms/field-types/RichText/RichText.tsx
+++ b/src/admin/components/forms/field-types/RichText/RichText.tsx
@@ -4,7 +4,7 @@ import { createEditor, Transforms, Node, Element as SlateElement, Text, BaseEdit
 import { ReactEditor, Editable, withReact, Slate } from 'slate-react';
 import { HistoryEditor, withHistory } from 'slate-history';
 import { richText } from '../../../../../fields/validations';
-import useFieldType from '../../useFieldType';
+import useField from '../../useField';
 import withCondition from '../../withCondition';
 import Label from '../../Label';
 import Error from '../../Error';
@@ -29,7 +29,7 @@ const defaultElements: RichTextElement[] = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6',
 const defaultLeaves: RichTextLeaf[] = ['bold', 'italic', 'underline', 'strikethrough', 'code'];
 
 const baseClass = 'rich-text';
-type CustomText = { text: string; [x: string]: unknown }
+type CustomText = { text: string;[x: string]: unknown }
 
 type CustomElement = { type: string; children: CustomText[] }
 
@@ -115,7 +115,7 @@ const RichText: React.FC<Props> = (props) => {
     return validationResult;
   }, [validate, required]);
 
-  const fieldType = useFieldType({
+  const fieldType = useField({
     path,
     validate: memoizedValidate,
     stringify: true,
@@ -194,7 +194,7 @@ const RichText: React.FC<Props> = (props) => {
       }}
     >
       <div className={`${baseClass}__wrap`}>
-        { !hideGutter && (<FieldTypeGutter />) }
+        {!hideGutter && (<FieldTypeGutter />)}
         <Error
           showError={showError}
           message={errorMessage}
diff --git a/src/admin/components/forms/field-types/Select/index.tsx b/src/admin/components/forms/field-types/Select/index.tsx
index 1aa6f06b3d..9f6e676f77 100644
--- a/src/admin/components/forms/field-types/Select/index.tsx
+++ b/src/admin/components/forms/field-types/Select/index.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback, useState, useEffect } from 'react';
 import withCondition from '../../withCondition';
 import ReactSelect from '../../../elements/ReactSelect';
-import useFieldType from '../../useFieldType';
+import useField from '../../useField';
 import Label from '../../Label';
 import Error from '../../Error';
 import FieldDescription from '../../FieldDescription';
@@ -58,7 +58,7 @@ const Select: React.FC<Props> = (props) => {
     showError,
     setValue,
     errorMessage,
-  } = useFieldType({
+  } = useField({
     path,
     validate: memoizedValidate,
     condition,
diff --git a/src/admin/components/forms/field-types/Text/index.tsx b/src/admin/components/forms/field-types/Text/index.tsx
index be60e6c376..aa6f044203 100644
--- a/src/admin/components/forms/field-types/Text/index.tsx
+++ b/src/admin/components/forms/field-types/Text/index.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect } from 'react';
-import useFieldType from '../../useFieldType';
+import useField from '../../useField';
 import withCondition from '../../withCondition';
 import Label from '../../Label';
 import Error from '../../Error';
@@ -30,7 +30,7 @@ const Text: React.FC<Props> = (props) => {
 
   const path = pathFromProps || name;
 
-  const fieldType = useFieldType<string>({
+  const fieldType = useField<string>({
     path,
     validate,
     enableDebouncedValue: true,
diff --git a/src/admin/components/forms/field-types/Textarea/index.tsx b/src/admin/components/forms/field-types/Textarea/index.tsx
index e221b48484..ae6331d625 100644
--- a/src/admin/components/forms/field-types/Textarea/index.tsx
+++ b/src/admin/components/forms/field-types/Textarea/index.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react';
-import useFieldType from '../../useFieldType';
+import useField from '../../useField';
 import withCondition from '../../withCondition';
 import Label from '../../Label';
 import Error from '../../Error';
@@ -41,7 +41,7 @@ const Textarea: React.FC<Props> = (props) => {
     showError,
     setValue,
     errorMessage,
-  } = useFieldType({
+  } = useField({
     path,
     validate: memoizedValidate,
     enableDebouncedValue: true,
diff --git a/src/admin/components/forms/field-types/Upload/index.tsx b/src/admin/components/forms/field-types/Upload/index.tsx
index e08c41da14..bb76e35c13 100644
--- a/src/admin/components/forms/field-types/Upload/index.tsx
+++ b/src/admin/components/forms/field-types/Upload/index.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import { useModal } from '@faceless-ui/modal';
 import { useConfig } from '@payloadcms/config-provider';
-import useFieldType from '../../useFieldType';
+import useField from '../../useField';
 import withCondition from '../../withCondition';
 import Button from '../../../elements/Button';
 import Label from '../../Label';
@@ -53,7 +53,7 @@ const Upload: React.FC<Props> = (props) => {
     return validationResult;
   }, [validate, required]);
 
-  const fieldType = useFieldType({
+  const fieldType = useField({
     path,
     validate: memoizedValidate,
     condition,
diff --git a/src/admin/components/forms/useFieldType/index.tsx b/src/admin/components/forms/useField/index.tsx
similarity index 95%
rename from src/admin/components/forms/useFieldType/index.tsx
rename to src/admin/components/forms/useField/index.tsx
index a186de6c63..5cee2de4a2 100644
--- a/src/admin/components/forms/useFieldType/index.tsx
+++ b/src/admin/components/forms/useField/index.tsx
@@ -5,7 +5,7 @@ import { useFormProcessing, useFormSubmitted, useFormModified, useForm } from '.
 import useDebounce from '../../../hooks/useDebounce';
 import { Options, FieldType } from './types';
 
-const useFieldType = <T extends unknown>(options: Options): FieldType<T> => {
+const useField = <T extends unknown>(options: Options): FieldType<T> => {
   const {
     path,
     validate,
@@ -80,7 +80,7 @@ const useFieldType = <T extends unknown>(options: Options): FieldType<T> => {
     condition
   ]);
 
-  // Method to return from `useFieldType`, used to
+  // Method to return from `useField`, 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) => {
@@ -130,4 +130,4 @@ const useFieldType = <T extends unknown>(options: Options): FieldType<T> => {
   };
 };
 
-export default useFieldType;
+export default useField;
diff --git a/src/admin/components/forms/useFieldType/types.ts b/src/admin/components/forms/useField/types.ts
similarity index 100%
rename from src/admin/components/forms/useFieldType/types.ts
rename to src/admin/components/forms/useField/types.ts
diff --git a/src/admin/components/views/collections/Edit/Auth/APIKey.tsx b/src/admin/components/views/collections/Edit/Auth/APIKey.tsx
index bcbfad2bca..9f2bb6cbf2 100644
--- a/src/admin/components/views/collections/Edit/Auth/APIKey.tsx
+++ b/src/admin/components/views/collections/Edit/Auth/APIKey.tsx
@@ -1,6 +1,6 @@
 import React, { useMemo, useState, useEffect } from 'react';
 import { v4 as uuidv4 } from 'uuid';
-import useFieldType from '../../../../forms/useFieldType';
+import useField from '../../../../forms/useField';
 import Label from '../../../../forms/Label';
 import CopyToClipboard from '../../../../elements/CopyToClipboard';
 import { text } from '../../../../../../fields/validations';
@@ -31,7 +31,7 @@ const APIKey: React.FC = () => {
     </div>
   ), [apiKeyValue]);
 
-  const fieldType = useFieldType({
+  const fieldType = useField({
     path: 'apiKey',
     validate,
   });
diff --git a/src/admin/components/views/collections/Edit/Upload/index.tsx b/src/admin/components/views/collections/Edit/Upload/index.tsx
index ba28fc50c2..ca8f5ddf44 100644
--- a/src/admin/components/views/collections/Edit/Upload/index.tsx
+++ b/src/admin/components/views/collections/Edit/Upload/index.tsx
@@ -1,7 +1,7 @@
 import React, {
   useState, useRef, useEffect, useCallback,
 } from 'react';
-import useFieldType from '../../../../forms/useFieldType';
+import useField from '../../../../forms/useField';
 import Button from '../../../../elements/Button';
 import FileDetails from '../../../../elements/FileDetails';
 import Error from '../../../../forms/Error';
@@ -45,7 +45,7 @@ const Upload: React.FC<Props> = (props) => {
     setValue,
     showError,
     errorMessage,
-  } = useFieldType<{name: string}>({
+  } = useField<{ name: string }>({
     path: 'file',
     validate,
   });