From 0b1a1b585b9a11b574341ed3bbdc3ecdc4c9b235 Mon Sep 17 00:00:00 2001
From: Jacob Fletcher <jacobsfletch@gmail.com>
Date: Mon, 17 Mar 2025 10:27:21 -0400
Subject: [PATCH] fix(ui): processing and initializing form does not disable
 standalone fields (#11714)

The form component's `initializing` and `processing` states do not
disable fields that are rendered outside of `DocumentFields`. Fields
currently rely on the `readOnly` prop provided by `DocumentFields` and
do not subscribe to these states for themselves. This means that fields
that are rendered outright, such as within the bulk edit drawer, they do
not receive a `readOnly` prop and are therefore never disabled.

The fix is add a `disabled` property to the `useField` hook. This
subscribes to the `initializing` and `processing` states in the same way
as `DocumentFields`, however, now each field can determine its own
disabled state instead of relying solely on the `readOnly` prop. Adding
this new prop has no overhead as `processing` and `initializing` is
already being subscribed to within `useField`.
---
 packages/richtext-lexical/src/field/Field.tsx |  5 +--
 .../richtext-slate/src/field/RichText.tsx     |  4 +-
 .../ui/src/elements/DocumentFields/index.tsx  |  7 +---
 packages/ui/src/fields/Array/index.tsx        | 11 ++++--
 packages/ui/src/fields/Blocks/index.tsx       | 14 +++++--
 packages/ui/src/fields/Checkbox/index.tsx     |  7 ++--
 packages/ui/src/fields/Code/index.tsx         |  7 ++--
 packages/ui/src/fields/Collapsible/index.tsx  |  9 +++--
 .../ui/src/fields/ConfirmPassword/index.tsx   |  6 +--
 packages/ui/src/fields/DateTime/index.tsx     |  9 +++--
 packages/ui/src/fields/Email/index.tsx        | 11 +++++-
 packages/ui/src/fields/Group/index.tsx        |  2 +
 packages/ui/src/fields/JSON/index.tsx         | 10 +++--
 packages/ui/src/fields/Number/index.tsx       | 11 +++---
 packages/ui/src/fields/Password/index.tsx     |  7 +---
 packages/ui/src/fields/Point/index.tsx        |  7 ++--
 packages/ui/src/fields/RadioGroup/index.tsx   |  7 ++--
 packages/ui/src/fields/Relationship/index.tsx | 11 +++---
 packages/ui/src/fields/Select/index.tsx       |  7 ++--
 packages/ui/src/fields/Tabs/index.tsx         |  2 +
 packages/ui/src/fields/Text/index.tsx         |  7 ++--
 packages/ui/src/fields/Textarea/index.tsx     |  3 +-
 packages/ui/src/fields/Upload/index.tsx       |  3 +-
 packages/ui/src/forms/useField/index.tsx      |  1 +
 packages/ui/src/forms/useField/types.ts       |  1 +
 test/form-state/e2e.spec.ts                   | 39 ++++++++++++++++---
 tsconfig.base.json                            |  2 +-
 27 files changed, 134 insertions(+), 76 deletions(-)

diff --git a/packages/richtext-lexical/src/field/Field.tsx b/packages/richtext-lexical/src/field/Field.tsx
index 98a4fbeb7..3b10ed529 100644
--- a/packages/richtext-lexical/src/field/Field.tsx
+++ b/packages/richtext-lexical/src/field/Field.tsx
@@ -68,8 +68,7 @@ const RichTextComponent: React.FC<
 
   const {
     customComponents: { AfterInput, BeforeInput, Description, Error, Label } = {},
-    formInitializing,
-    formProcessing,
+    disabled: disabledFromField,
     initialValue,
     setValue,
     showError,
@@ -79,7 +78,7 @@ const RichTextComponent: React.FC<
     validate: memoizedValidate,
   })
 
-  const disabled = readOnlyFromProps || formProcessing || formInitializing
+  const disabled = readOnlyFromProps || disabledFromField
 
   const [isSmallWidthViewport, setIsSmallWidthViewport] = useState<boolean>(false)
   const [rerenderProviderKey, setRerenderProviderKey] = useState<Date>()
diff --git a/packages/richtext-slate/src/field/RichText.tsx b/packages/richtext-slate/src/field/RichText.tsx
index 03a0ca15c..1effc7eb0 100644
--- a/packages/richtext-slate/src/field/RichText.tsx
+++ b/packages/richtext-slate/src/field/RichText.tsx
@@ -95,7 +95,7 @@ const RichTextField: React.FC<LoadedSlateFieldProps> = (props) => {
 
   const {
     customComponents: { Description, Error, Label } = {},
-    formInitializing,
+    disabled: disabledFromField,
     initialValue,
     setValue,
     showError,
@@ -105,7 +105,7 @@ const RichTextField: React.FC<LoadedSlateFieldProps> = (props) => {
     validate: memoizedValidate,
   })
 
-  const disabled = readOnlyFromProps || formInitializing
+  const disabled = readOnlyFromProps || disabledFromField
 
   const editor = useMemo(() => {
     let CreatedEditor = withEnterBreakOut(withHistory(withReact(createEditor())))
diff --git a/packages/ui/src/elements/DocumentFields/index.tsx b/packages/ui/src/elements/DocumentFields/index.tsx
index 303f6ba67..bf65c01cd 100644
--- a/packages/ui/src/elements/DocumentFields/index.tsx
+++ b/packages/ui/src/elements/DocumentFields/index.tsx
@@ -29,7 +29,7 @@ export const DocumentFields: React.FC<Args> = ({
   docPermissions,
   fields,
   forceSidebarWrap,
-  readOnly: readOnlyProp,
+  readOnly,
   schemaPathSegments,
 }) => {
   const { hasSidebarFields, mainFields, sidebarFields } = useMemo(() => {
@@ -53,11 +53,6 @@ export const DocumentFields: React.FC<Args> = ({
     )
   }, [fields])
 
-  const formInitializing = useFormInitializing()
-  const formProcessing = useFormProcessing()
-
-  const readOnly = readOnlyProp || formInitializing || formProcessing
-
   return (
     <div
       className={[
diff --git a/packages/ui/src/fields/Array/index.tsx b/packages/ui/src/fields/Array/index.tsx
index 08a9f7839..3a6ee7573 100644
--- a/packages/ui/src/fields/Array/index.tsx
+++ b/packages/ui/src/fields/Array/index.tsx
@@ -111,6 +111,7 @@ export const ArrayFieldComponent: ArrayFieldClientComponent = (props) => {
 
   const {
     customComponents: { AfterInput, BeforeInput, Description, Error, Label, RowLabels } = {},
+    disabled,
     errorPaths,
     rows: rowsData = [],
     showError,
@@ -197,7 +198,7 @@ export const ArrayFieldComponent: ArrayFieldClientComponent = (props) => {
   const fieldErrorCount = errorPaths.length
   const fieldHasErrors = submitted && errorPaths.length > 0
 
-  const showRequired = readOnly && rowsData.length === 0
+  const showRequired = (readOnly || disabled) && rowsData.length === 0
   const showMinRows = rowsData.length < minRows || (required && rowsData.length === 0)
 
   return (
@@ -285,7 +286,11 @@ export const ArrayFieldComponent: ArrayFieldClientComponent = (props) => {
             ).length
 
             return (
-              <DraggableSortableItem disabled={readOnly || !isSortable} id={rowID} key={rowID}>
+              <DraggableSortableItem
+                disabled={readOnly || disabled || !isSortable}
+                id={rowID}
+                key={rowID}
+              >
                 {(draggableSortableItemProps) => (
                   <ArrayRow
                     {...draggableSortableItemProps}
@@ -303,7 +308,7 @@ export const ArrayFieldComponent: ArrayFieldClientComponent = (props) => {
                     parentPath={path}
                     path={rowPath}
                     permissions={permissions}
-                    readOnly={readOnly}
+                    readOnly={readOnly || disabled}
                     removeRow={removeRow}
                     row={rowData}
                     rowCount={rowsData?.length}
diff --git a/packages/ui/src/fields/Blocks/index.tsx b/packages/ui/src/fields/Blocks/index.tsx
index e0904f650..8b68ebf6d 100644
--- a/packages/ui/src/fields/Blocks/index.tsx
+++ b/packages/ui/src/fields/Blocks/index.tsx
@@ -54,6 +54,7 @@ const BlocksFieldComponent: BlocksFieldClientComponent = (props) => {
     schemaPath: schemaPathFromProps,
     validate,
   } = props
+
   const schemaPath = schemaPathFromProps ?? name
 
   const minRows = (minRowsProp ?? required) ? 1 : 0
@@ -98,6 +99,7 @@ const BlocksFieldComponent: BlocksFieldClientComponent = (props) => {
 
   const {
     customComponents: { AfterInput, BeforeInput, Description, Error, Label, RowLabels } = {},
+    disabled,
     errorPaths,
     rows = [],
     showError,
@@ -276,7 +278,11 @@ const BlocksFieldComponent: BlocksFieldClientComponent = (props) => {
               ).length
 
               return (
-                <DraggableSortableItem disabled={readOnly || !isSortable} id={row.id} key={row.id}>
+                <DraggableSortableItem
+                  disabled={readOnly || disabled || !isSortable}
+                  id={row.id}
+                  key={row.id}
+                >
                   {(draggableSortableItemProps) => (
                     <BlockRow
                       {...draggableSortableItemProps}
@@ -295,7 +301,7 @@ const BlocksFieldComponent: BlocksFieldClientComponent = (props) => {
                       parentPath={path}
                       path={rowPath}
                       permissions={permissions}
-                      readOnly={readOnly}
+                      readOnly={readOnly || disabled}
                       removeRow={removeRow}
                       row={row}
                       rowCount={rows.length}
@@ -335,12 +341,12 @@ const BlocksFieldComponent: BlocksFieldClientComponent = (props) => {
         <Fragment>
           <DrawerToggler
             className={`${baseClass}__drawer-toggler`}
-            disabled={readOnly}
+            disabled={readOnly || disabled}
             slug={drawerSlug}
           >
             <Button
               buttonStyle="icon-label"
-              disabled={readOnly}
+              disabled={readOnly || disabled}
               el="span"
               icon="plus"
               iconPosition="left"
diff --git a/packages/ui/src/fields/Checkbox/index.tsx b/packages/ui/src/fields/Checkbox/index.tsx
index 336a7285b..e3fc493cf 100644
--- a/packages/ui/src/fields/Checkbox/index.tsx
+++ b/packages/ui/src/fields/Checkbox/index.tsx
@@ -18,9 +18,9 @@ import { withCondition } from '../../forms/withCondition/index.js'
 import { useEditDepth } from '../../providers/EditDepth/index.js'
 import { generateFieldID } from '../../utilities/generateFieldID.js'
 import { mergeFieldStyles } from '../mergeFieldStyles.js'
-import './index.scss'
 import { fieldBaseClass } from '../shared/index.js'
 import { CheckboxInput } from './Input.js'
+import './index.scss'
 
 const baseClass = 'checkbox'
 
@@ -59,6 +59,7 @@ const CheckboxFieldComponent: CheckboxFieldClientComponent = (props) => {
 
   const {
     customComponents: { AfterInput, BeforeInput, Description, Error, Label } = {},
+    disabled,
     setValue,
     showError,
     value,
@@ -91,7 +92,7 @@ const CheckboxFieldComponent: CheckboxFieldClientComponent = (props) => {
         showError && 'error',
         className,
         value && `${baseClass}--checked`,
-        readOnly && `${baseClass}--read-only`,
+        (readOnly || disabled) && `${baseClass}--read-only`,
       ]
         .filter(Boolean)
         .join(' ')}
@@ -112,7 +113,7 @@ const CheckboxFieldComponent: CheckboxFieldClientComponent = (props) => {
         name={path}
         onToggle={onToggle}
         partialChecked={partialChecked}
-        readOnly={readOnly}
+        readOnly={readOnly || disabled}
         required={required}
       />
       <RenderCustomComponent
diff --git a/packages/ui/src/fields/Code/index.tsx b/packages/ui/src/fields/Code/index.tsx
index 078b12459..5a9f38e45 100644
--- a/packages/ui/src/fields/Code/index.tsx
+++ b/packages/ui/src/fields/Code/index.tsx
@@ -47,6 +47,7 @@ const CodeFieldComponent: CodeFieldClientComponent = (props) => {
 
   const {
     customComponents: { AfterInput, BeforeInput, Description, Error, Label } = {},
+    disabled,
     setValue,
     showError,
     value,
@@ -64,7 +65,7 @@ const CodeFieldComponent: CodeFieldClientComponent = (props) => {
         baseClass,
         className,
         showError && 'error',
-        readOnly && 'read-only',
+        (readOnly || disabled) && 'read-only',
       ]
         .filter(Boolean)
         .join(' ')}
@@ -84,10 +85,10 @@ const CodeFieldComponent: CodeFieldClientComponent = (props) => {
         {BeforeInput}
         <CodeEditor
           defaultLanguage={prismToMonacoLanguageMap[language] || language}
-          onChange={readOnly ? () => null : (val) => setValue(val)}
+          onChange={readOnly || disabled ? () => null : (val) => setValue(val)}
           onMount={onMount}
           options={editorOptions}
-          readOnly={readOnly}
+          readOnly={readOnly || disabled}
           value={(value as string) || ''}
         />
         {AfterInput}
diff --git a/packages/ui/src/fields/Collapsible/index.tsx b/packages/ui/src/fields/Collapsible/index.tsx
index 4955fc40e..70bebd913 100644
--- a/packages/ui/src/fields/Collapsible/index.tsx
+++ b/packages/ui/src/fields/Collapsible/index.tsx
@@ -42,9 +42,10 @@ const CollapsibleFieldComponent: CollapsibleFieldClientComponent = (props) => {
   const [errorCount, setErrorCount] = useState(0)
   const fieldHasErrors = errorCount > 0
 
-  const { customComponents: { AfterInput, BeforeInput, Description, Label } = {} } = useField({
-    path,
-  })
+  const { customComponents: { AfterInput, BeforeInput, Description, Label } = {}, disabled } =
+    useField({
+      path,
+    })
 
   const onToggle = useCallback(
     async (newCollapsedState: boolean): Promise<void> => {
@@ -145,7 +146,7 @@ const CollapsibleFieldComponent: CollapsibleFieldClientComponent = (props) => {
             parentPath={parentPath}
             parentSchemaPath={parentSchemaPath}
             permissions={permissions}
-            readOnly={readOnly}
+            readOnly={readOnly || disabled}
           />
         </CollapsibleElement>
         {AfterInput}
diff --git a/packages/ui/src/fields/ConfirmPassword/index.tsx b/packages/ui/src/fields/ConfirmPassword/index.tsx
index c0722f0b6..cb20ffc3a 100644
--- a/packages/ui/src/fields/ConfirmPassword/index.tsx
+++ b/packages/ui/src/fields/ConfirmPassword/index.tsx
@@ -16,10 +16,10 @@ export type ConfirmPasswordFieldProps = {
 }
 
 export const ConfirmPasswordField: React.FC<ConfirmPasswordFieldProps> = (props) => {
-  const { disabled, path = 'confirm-password' } = props
+  const { disabled: disabledFromProps, path = 'confirm-password' } = props
   const { t } = useTranslation()
 
-  const { setValue, showError, value } = useField({
+  const { disabled, setValue, showError, value } = useField({
     path,
     validate: (value, options) => {
       return confirmPassword(value, {
@@ -47,7 +47,7 @@ export const ConfirmPasswordField: React.FC<ConfirmPasswordFieldProps> = (props)
         <input
           aria-label={t('authentication:confirmPassword')}
           autoComplete="off"
-          disabled={!!disabled}
+          disabled={!!(disabled || disabledFromProps)}
           id="field-confirm-password"
           name="confirm-password"
           onChange={setValue}
diff --git a/packages/ui/src/fields/DateTime/index.tsx b/packages/ui/src/fields/DateTime/index.tsx
index a020c8cdf..da801b937 100644
--- a/packages/ui/src/fields/DateTime/index.tsx
+++ b/packages/ui/src/fields/DateTime/index.tsx
@@ -58,6 +58,7 @@ const DateTimeFieldComponent: DateFieldClientComponent = (props) => {
 
   const {
     customComponents: { AfterInput, BeforeInput, Description, Error, Label } = {},
+    disabled,
     setValue,
     showError,
     value,
@@ -102,7 +103,7 @@ const DateTimeFieldComponent: DateFieldClientComponent = (props) => {
 
   const onChange = useCallback(
     (incomingDate: Date) => {
-      if (!readOnly) {
+      if (!(readOnly || disabled)) {
         if (timezone && selectedTimezone && incomingDate) {
           // Create TZDate instances for the selected timezone
           const TZDateWithSelectedTz = TZDate.tz(selectedTimezone)
@@ -132,7 +133,7 @@ const DateTimeFieldComponent: DateFieldClientComponent = (props) => {
         }
       }
     },
-    [readOnly, setValue, timezone, selectedTimezone],
+    [readOnly, disabled, timezone, selectedTimezone, isDateOnly, setValue],
   )
 
   const onChangeTimezone = useCallback(
@@ -157,7 +158,7 @@ const DateTimeFieldComponent: DateFieldClientComponent = (props) => {
         baseClass,
         className,
         showError && `${baseClass}--has-error`,
-        readOnly && 'read-only',
+        (readOnly || disabled) && 'read-only',
       ]
         .filter(Boolean)
         .join(' ')}
@@ -180,7 +181,7 @@ const DateTimeFieldComponent: DateFieldClientComponent = (props) => {
             ...datePickerProps?.overrides,
           }}
           placeholder={getTranslation(placeholder, i18n)}
-          readOnly={readOnly}
+          readOnly={readOnly || disabled}
           value={displayedValue}
         />
         {timezone && supportedTimezones.length > 0 && (
diff --git a/packages/ui/src/fields/Email/index.tsx b/packages/ui/src/fields/Email/index.tsx
index 430065feb..305ad5b28 100644
--- a/packages/ui/src/fields/Email/index.tsx
+++ b/packages/ui/src/fields/Email/index.tsx
@@ -51,6 +51,7 @@ const EmailFieldComponent: EmailFieldClientComponent = (props) => {
 
   const {
     customComponents: { AfterInput, BeforeInput, Description, Error, Label } = {},
+    disabled,
     setValue,
     showError,
     value,
@@ -63,7 +64,13 @@ const EmailFieldComponent: EmailFieldClientComponent = (props) => {
 
   return (
     <div
-      className={[fieldBaseClass, 'email', className, showError && 'error', readOnly && 'read-only']
+      className={[
+        fieldBaseClass,
+        'email',
+        className,
+        showError && 'error',
+        (readOnly || disabled) && 'read-only',
+      ]
         .filter(Boolean)
         .join(' ')}
       style={styles}
@@ -84,7 +91,7 @@ const EmailFieldComponent: EmailFieldClientComponent = (props) => {
         {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
         <input
           autoComplete={autoComplete}
-          disabled={readOnly}
+          disabled={readOnly || disabled}
           id={`field-${path.replace(/\./g, '__')}`}
           name={path}
           onChange={setValue}
diff --git a/packages/ui/src/fields/Group/index.tsx b/packages/ui/src/fields/Group/index.tsx
index b93661ba3..6190304ac 100644
--- a/packages/ui/src/fields/Group/index.tsx
+++ b/packages/ui/src/fields/Group/index.tsx
@@ -40,8 +40,10 @@ export const GroupFieldComponent: GroupFieldClientComponent = (props) => {
   const isWithinGroup = useGroup()
   const isWithinRow = useRow()
   const isWithinTab = useTabs()
+
   const { customComponents: { AfterInput, BeforeInput, Description, Label } = {}, errorPaths } =
     useField({ path })
+
   const submitted = useFormSubmitted()
   const errorCount = errorPaths.length
   const fieldHasErrors = submitted && errorCount > 0
diff --git a/packages/ui/src/fields/JSON/index.tsx b/packages/ui/src/fields/JSON/index.tsx
index 87cf7f32c..2cc811b6e 100644
--- a/packages/ui/src/fields/JSON/index.tsx
+++ b/packages/ui/src/fields/JSON/index.tsx
@@ -31,6 +31,7 @@ const JSONFieldComponent: JSONFieldClientComponent = (props) => {
     readOnly,
     validate,
   } = props
+
   const [jsonError, setJsonError] = useState<string>()
   const inputChangeFromRef = React.useRef<'system' | 'user'>('system')
   const [editorKey, setEditorKey] = useState<string>('')
@@ -46,6 +47,7 @@ const JSONFieldComponent: JSONFieldClientComponent = (props) => {
 
   const {
     customComponents: { AfterInput, BeforeInput, Description, Error, Label } = {},
+    disabled,
     initialValue,
     setValue,
     showError,
@@ -90,7 +92,7 @@ const JSONFieldComponent: JSONFieldClientComponent = (props) => {
 
   const handleChange = useCallback(
     (val) => {
-      if (readOnly) {
+      if (readOnly || disabled) {
         return
       }
       inputChangeFromRef.current = 'user'
@@ -103,7 +105,7 @@ const JSONFieldComponent: JSONFieldClientComponent = (props) => {
         setJsonError(e)
       }
     },
-    [readOnly, setValue],
+    [readOnly, disabled, setValue],
   )
 
   useEffect(() => {
@@ -128,7 +130,7 @@ const JSONFieldComponent: JSONFieldClientComponent = (props) => {
         baseClass,
         className,
         showError && 'error',
-        readOnly && 'read-only',
+        (readOnly || disabled) && 'read-only',
       ]
         .filter(Boolean)
         .join(' ')}
@@ -153,7 +155,7 @@ const JSONFieldComponent: JSONFieldClientComponent = (props) => {
           onChange={handleChange}
           onMount={handleMount}
           options={editorOptions}
-          readOnly={readOnly}
+          readOnly={readOnly || disabled}
           value={initialStringValue}
           wrapperProps={{
             id: `field-${path?.replace(/\./g, '__')}`,
diff --git a/packages/ui/src/fields/Number/index.tsx b/packages/ui/src/fields/Number/index.tsx
index c0ae6a9c0..98be6bee3 100644
--- a/packages/ui/src/fields/Number/index.tsx
+++ b/packages/ui/src/fields/Number/index.tsx
@@ -56,6 +56,7 @@ const NumberFieldComponent: NumberFieldClientComponent = (props) => {
 
   const {
     customComponents: { AfterInput, BeforeInput, Description, Error, Label } = {},
+    disabled,
     setValue,
     showError,
     value,
@@ -88,7 +89,7 @@ const NumberFieldComponent: NumberFieldClientComponent = (props) => {
 
   const handleHasManyChange = useCallback(
     (selectedOption) => {
-      if (!readOnly) {
+      if (!(readOnly || disabled)) {
         let newValue
         if (!selectedOption) {
           newValue = []
@@ -101,7 +102,7 @@ const NumberFieldComponent: NumberFieldClientComponent = (props) => {
         setValue(newValue)
       }
     },
-    [readOnly, setValue],
+    [readOnly, disabled, setValue],
   )
 
   // useEffect update valueToRender:
@@ -131,7 +132,7 @@ const NumberFieldComponent: NumberFieldClientComponent = (props) => {
         'number',
         className,
         showError && 'error',
-        readOnly && 'read-only',
+        (readOnly || disabled) && 'read-only',
         hasMany && 'has-many',
       ]
         .filter(Boolean)
@@ -153,7 +154,7 @@ const NumberFieldComponent: NumberFieldClientComponent = (props) => {
         {hasMany ? (
           <ReactSelect
             className={`field-${path.replace(/\./g, '__')}`}
-            disabled={readOnly}
+            disabled={readOnly || disabled}
             filterOption={(_, rawInput) => {
               const isOverHasMany = Array.isArray(value) && value.length >= maxRows
               return isNumber(rawInput) && !isOverHasMany
@@ -179,7 +180,7 @@ const NumberFieldComponent: NumberFieldClientComponent = (props) => {
         ) : (
           <div>
             <input
-              disabled={readOnly}
+              disabled={readOnly || disabled}
               id={`field-${path.replace(/\./g, '__')}`}
               max={max}
               min={min}
diff --git a/packages/ui/src/fields/Password/index.tsx b/packages/ui/src/fields/Password/index.tsx
index 89d4531a6..a494728d5 100644
--- a/packages/ui/src/fields/Password/index.tsx
+++ b/packages/ui/src/fields/Password/index.tsx
@@ -71,8 +71,7 @@ const PasswordFieldComponent: React.FC<PasswordFieldProps> = (props) => {
 
   const {
     customComponents: { AfterInput, BeforeInput, Description, Error, Label } = {},
-    formInitializing,
-    formProcessing,
+    disabled,
     setValue,
     showError,
     value,
@@ -81,8 +80,6 @@ const PasswordFieldComponent: React.FC<PasswordFieldProps> = (props) => {
     validate: memoizedValidate,
   })
 
-  const disabled = disabledFromProps || formInitializing || formProcessing
-
   const renderRTL = isFieldRTL({
     fieldLocalized: false,
     fieldRTL: rtl,
@@ -109,7 +106,7 @@ const PasswordFieldComponent: React.FC<PasswordFieldProps> = (props) => {
       }}
       path={path}
       placeholder={placeholder}
-      readOnly={disabled}
+      readOnly={disabled || disabledFromProps}
       required={required}
       rtl={renderRTL}
       showError={showError}
diff --git a/packages/ui/src/fields/Point/index.tsx b/packages/ui/src/fields/Point/index.tsx
index 37f79b0cd..3d3ec40a9 100644
--- a/packages/ui/src/fields/Point/index.tsx
+++ b/packages/ui/src/fields/Point/index.tsx
@@ -44,6 +44,7 @@ export const PointFieldComponent: PointFieldClientComponent = (props) => {
 
   const {
     customComponents: { AfterInput, BeforeInput, Description, Error, Label } = {},
+    disabled,
     setValue,
     showError,
     value = [null, null],
@@ -81,7 +82,7 @@ export const PointFieldComponent: PointFieldClientComponent = (props) => {
         baseClass,
         className,
         showError && 'error',
-        readOnly && 'read-only',
+        (readOnly || disabled) && 'read-only',
       ]
         .filter(Boolean)
         .join(' ')}
@@ -105,7 +106,7 @@ export const PointFieldComponent: PointFieldClientComponent = (props) => {
             {/* disable eslint rule because the label is dynamic */}
             {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
             <input
-              disabled={readOnly}
+              disabled={readOnly || disabled}
               id={`field-longitude-${path?.replace(/\./g, '__')}`}
               name={`${path}.longitude`}
               onChange={(e) => handleChange(e, 0)}
@@ -138,7 +139,7 @@ export const PointFieldComponent: PointFieldClientComponent = (props) => {
             {/* disable eslint rule because the label is dynamic */}
             {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
             <input
-              disabled={readOnly}
+              disabled={readOnly || disabled}
               id={`field-latitude-${path?.replace(/\./g, '__')}`}
               name={`${path}.latitude`}
               onChange={(e) => handleChange(e, 1)}
diff --git a/packages/ui/src/fields/RadioGroup/index.tsx b/packages/ui/src/fields/RadioGroup/index.tsx
index 76b3978c5..bb5746bda 100644
--- a/packages/ui/src/fields/RadioGroup/index.tsx
+++ b/packages/ui/src/fields/RadioGroup/index.tsx
@@ -53,6 +53,7 @@ const RadioGroupFieldComponent: RadioFieldClientComponent = (props) => {
 
   const {
     customComponents: { AfterInput, BeforeInput, Description, Error, Label } = {},
+    disabled,
     setValue,
     showError,
     value: valueFromContext,
@@ -73,7 +74,7 @@ const RadioGroupFieldComponent: RadioFieldClientComponent = (props) => {
         className,
         `${baseClass}--layout-${layout}`,
         showError && 'error',
-        readOnly && `${baseClass}--read-only`,
+        (readOnly || disabled) && `${baseClass}--read-only`,
       ]
         .filter(Boolean)
         .join(' ')}
@@ -115,13 +116,13 @@ const RadioGroupFieldComponent: RadioFieldClientComponent = (props) => {
                       onChangeFromProps(optionValue)
                     }
 
-                    if (!readOnly) {
+                    if (!(readOnly || disabled)) {
                       setValue(optionValue, !!disableModifyingFormFromProps)
                     }
                   }}
                   option={optionIsObject(option) ? option : { label: option, value: option }}
                   path={path}
-                  readOnly={readOnly}
+                  readOnly={readOnly || disabled}
                   uuid={uuid}
                 />
               </li>
diff --git a/packages/ui/src/fields/Relationship/index.tsx b/packages/ui/src/fields/Relationship/index.tsx
index 11fc7870d..f70482981 100644
--- a/packages/ui/src/fields/Relationship/index.tsx
+++ b/packages/ui/src/fields/Relationship/index.tsx
@@ -101,6 +101,7 @@ const RelationshipFieldComponent: RelationshipFieldClientComponent = (props) =>
 
   const {
     customComponents: { AfterInput, BeforeInput, Description, Error, Label } = {},
+    disabled,
     filterOptions,
     initialValue,
     setValue,
@@ -577,8 +578,8 @@ const RelationshipFieldComponent: RelationshipFieldClientComponent = (props) =>
         className,
         showError && 'error',
         errorLoading && 'error-loading',
-        readOnly && `${baseClass}--read-only`,
-        !readOnly && allowCreate && `${baseClass}--allow-create`,
+        (readOnly || disabled) && `${baseClass}--read-only`,
+        !(readOnly || disabled) && allowCreate && `${baseClass}--allow-create`,
       ]
         .filter(Boolean)
         .join(' ')}
@@ -611,7 +612,7 @@ const RelationshipFieldComponent: RelationshipFieldClientComponent = (props) =>
                 onDocumentDrawerOpen,
                 onSave,
               }}
-              disabled={readOnly || isDrawerOpen}
+              disabled={readOnly || disabled || isDrawerOpen}
               filterOption={enableWordBoundarySearch ? filterOption : undefined}
               getOptionValue={(option) => {
                 if (!option) {
@@ -625,7 +626,7 @@ const RelationshipFieldComponent: RelationshipFieldClientComponent = (props) =>
               isMulti={hasMany}
               isSortable={isSortable}
               onChange={
-                !readOnly
+                !(readOnly || disabled)
                   ? (selected) => {
                       if (selected === null) {
                         setValue(hasMany ? [] : null)
@@ -689,7 +690,7 @@ const RelationshipFieldComponent: RelationshipFieldClientComponent = (props) =>
               showError={showError}
               value={valueToRender ?? null}
             />
-            {!readOnly && allowCreate && (
+            {!(readOnly || disabled) && allowCreate && (
               <AddNewRelation
                 hasMany={hasMany}
                 path={path}
diff --git a/packages/ui/src/fields/Select/index.tsx b/packages/ui/src/fields/Select/index.tsx
index 609c5ea4d..f49af6fe6 100644
--- a/packages/ui/src/fields/Select/index.tsx
+++ b/packages/ui/src/fields/Select/index.tsx
@@ -64,6 +64,7 @@ const SelectFieldComponent: SelectFieldClientComponent = (props) => {
 
   const {
     customComponents: { AfterInput, BeforeInput, Description, Error, Label } = {},
+    disabled,
     setValue,
     showError,
     value,
@@ -74,7 +75,7 @@ const SelectFieldComponent: SelectFieldClientComponent = (props) => {
 
   const onChange: ReactSelectAdapterProps['onChange'] = useCallback(
     (selectedOption: OptionObject | OptionObject[]) => {
-      if (!readOnly) {
+      if (!readOnly || disabled) {
         let newValue: string | string[] = null
         if (selectedOption && hasMany) {
           if (Array.isArray(selectedOption)) {
@@ -93,7 +94,7 @@ const SelectFieldComponent: SelectFieldClientComponent = (props) => {
         setValue(newValue)
       }
     },
-    [readOnly, hasMany, setValue, onChangeFromProps],
+    [readOnly, disabled, hasMany, setValue, onChangeFromProps],
   )
 
   const styles = useMemo(() => mergeFieldStyles(field), [field])
@@ -116,7 +117,7 @@ const SelectFieldComponent: SelectFieldClientComponent = (props) => {
       onChange={onChange}
       options={options}
       path={path}
-      readOnly={readOnly}
+      readOnly={readOnly || disabled}
       required={required}
       showError={showError}
       style={styles}
diff --git a/packages/ui/src/fields/Tabs/index.tsx b/packages/ui/src/fields/Tabs/index.tsx
index 13601cc47..1646086cd 100644
--- a/packages/ui/src/fields/Tabs/index.tsx
+++ b/packages/ui/src/fields/Tabs/index.tsx
@@ -259,6 +259,7 @@ type ActiveTabProps = {
   readonly permissions: SanitizedFieldPermissions
   readonly readOnly: boolean
 }
+
 function TabContent({
   description,
   fields,
@@ -273,6 +274,7 @@ function TabContent({
   readOnly,
 }: ActiveTabProps) {
   const { i18n } = useTranslation()
+
   const { customComponents: { AfterInput, BeforeInput, Description, Field } = {} } = useField({
     path,
   })
diff --git a/packages/ui/src/fields/Text/index.tsx b/packages/ui/src/fields/Text/index.tsx
index 28f1b68d9..afa9aaa53 100644
--- a/packages/ui/src/fields/Text/index.tsx
+++ b/packages/ui/src/fields/Text/index.tsx
@@ -54,6 +54,7 @@ const TextFieldComponent: TextFieldClientComponent = (props) => {
 
   const {
     customComponents: { AfterInput, BeforeInput, Description, Error, Label } = {},
+    disabled,
     setValue,
     showError,
     value,
@@ -75,7 +76,7 @@ const TextFieldComponent: TextFieldClientComponent = (props) => {
 
   const handleHasManyChange = useCallback(
     (selectedOption) => {
-      if (!readOnly) {
+      if (!(readOnly || disabled)) {
         let newValue
         if (!selectedOption) {
           newValue = []
@@ -88,7 +89,7 @@ const TextFieldComponent: TextFieldClientComponent = (props) => {
         setValue(newValue)
       }
     },
-    [readOnly, setValue],
+    [readOnly, setValue, disabled],
   )
 
   // useEffect update valueToRender:
@@ -136,7 +137,7 @@ const TextFieldComponent: TextFieldClientComponent = (props) => {
       }
       path={path}
       placeholder={placeholder}
-      readOnly={readOnly}
+      readOnly={readOnly || disabled}
       required={required}
       rtl={renderRTL}
       showError={showError}
diff --git a/packages/ui/src/fields/Textarea/index.tsx b/packages/ui/src/fields/Textarea/index.tsx
index 91560fbe2..f27695f36 100644
--- a/packages/ui/src/fields/Textarea/index.tsx
+++ b/packages/ui/src/fields/Textarea/index.tsx
@@ -60,6 +60,7 @@ const TextareaFieldComponent: TextareaFieldClientComponent = (props) => {
 
   const {
     customComponents: { AfterInput, BeforeInput, Description, Error, Label } = {},
+    disabled,
     setValue,
     showError,
     value,
@@ -86,7 +87,7 @@ const TextareaFieldComponent: TextareaFieldClientComponent = (props) => {
       }}
       path={path}
       placeholder={getTranslation(placeholder, i18n)}
-      readOnly={readOnly}
+      readOnly={readOnly || disabled}
       required={required}
       rows={rows}
       rtl={isRTL}
diff --git a/packages/ui/src/fields/Upload/index.tsx b/packages/ui/src/fields/Upload/index.tsx
index d84c58908..681e5c18e 100644
--- a/packages/ui/src/fields/Upload/index.tsx
+++ b/packages/ui/src/fields/Upload/index.tsx
@@ -48,6 +48,7 @@ export function UploadComponent(props: UploadFieldClientProps) {
 
   const {
     customComponents: { AfterInput, BeforeInput, Description, Error, Label } = {},
+    disabled,
     filterOptions,
     setValue,
     showError,
@@ -79,7 +80,7 @@ export function UploadComponent(props: UploadFieldClientProps) {
       maxRows={maxRows}
       onChange={setValue}
       path={path}
-      readOnly={readOnly}
+      readOnly={readOnly || disabled}
       relationTo={relationTo}
       required={required}
       serverURL={config.serverURL}
diff --git a/packages/ui/src/forms/useField/index.tsx b/packages/ui/src/forms/useField/index.tsx
index 7a39a05b8..f3fc737df 100644
--- a/packages/ui/src/forms/useField/index.tsx
+++ b/packages/ui/src/forms/useField/index.tsx
@@ -105,6 +105,7 @@ export const useField = <TValue,>(options: Options): FieldType<TValue> => {
   const result: FieldType<TValue> = useMemo(
     () => ({
       customComponents: field?.customComponents,
+      disabled: processing || initializing,
       errorMessage: field?.errorMessage,
       errorPaths: field?.errorPaths || [],
       filterOptions,
diff --git a/packages/ui/src/forms/useField/types.ts b/packages/ui/src/forms/useField/types.ts
index fbe6043a8..2f43cbab6 100644
--- a/packages/ui/src/forms/useField/types.ts
+++ b/packages/ui/src/forms/useField/types.ts
@@ -9,6 +9,7 @@ export type Options = {
 
 export type FieldType<T> = {
   customComponents?: FieldState['customComponents']
+  disabled: boolean
   errorMessage?: string
   errorPaths?: string[]
   filterOptions?: FilterOptionsResult
diff --git a/test/form-state/e2e.spec.ts b/test/form-state/e2e.spec.ts
index fca62aea5..1c0b54185 100644
--- a/test/form-state/e2e.spec.ts
+++ b/test/form-state/e2e.spec.ts
@@ -1,12 +1,14 @@
 import type { BrowserContext, Page } from '@playwright/test'
+import type { PayloadTestSDK } from 'helpers/sdk/index.js'
 
 import { expect, test } from '@playwright/test'
 import { addBlock } from 'helpers/e2e/addBlock.js'
 import { assertNetworkRequests } from 'helpers/e2e/assertNetworkRequests.js'
 import * as path from 'path'
-import React from 'react'
 import { fileURLToPath } from 'url'
 
+import type { Config, Post } from './payload-types.js'
+
 import {
   ensureCompilationIsDone,
   initPageConsoleErrorCatch,
@@ -22,6 +24,8 @@ const dirname = path.dirname(filename)
 
 const title = 'Title'
 let context: BrowserContext
+let payload: PayloadTestSDK<Config>
+let serverURL: string
 
 test.describe('Form State', () => {
   let page: Page
@@ -29,8 +33,7 @@ test.describe('Form State', () => {
 
   test.beforeAll(async ({ browser }, testInfo) => {
     testInfo.setTimeout(TEST_TIMEOUT_LONG)
-
-    const { payload, serverURL } = await initPayloadE2ENoConfig({ dirname })
+    ;({ payload, serverURL } = await initPayloadE2ENoConfig({ dirname }))
     postsUrl = new AdminUrlUtil(serverURL, 'posts')
 
     context = await browser.newContext()
@@ -38,15 +41,31 @@ test.describe('Form State', () => {
     initPageConsoleErrorCatch(page)
     await ensureCompilationIsDone({ page, serverURL })
   })
+  test.beforeEach(async () => {
+    // await throttleTest({ page, context, delay: 'Fast 3G' })
+  })
 
-  test('collection — should re-enable fields after save', async () => {
+  test('should disable fields during initialization', async () => {
+    await page.goto(postsUrl.create, { waitUntil: 'commit' })
+    await expect(page.locator('#field-title')).toBeDisabled()
+  })
+
+  test('should disable fields while processing', async () => {
+    const doc = await createPost()
+    await page.goto(postsUrl.edit(doc.id))
+    await page.locator('#field-title').fill(title)
+    await page.click('#action-save', { delay: 100 })
+    await expect(page.locator('#field-title')).toBeDisabled()
+  })
+
+  test('should re-enable fields after save', async () => {
     await page.goto(postsUrl.create)
     await page.locator('#field-title').fill(title)
     await saveDocAndAssert(page)
     await expect(page.locator('#field-title')).toBeEnabled()
   })
 
-  test('should thread proper event argument to validation functions', async () => {
+  test('should only validate on submit via the `event` argument', async () => {
     await page.goto(postsUrl.create)
     await page.locator('#field-title').fill(title)
     await page.locator('#field-validateUsingEvent').fill('Not allowed')
@@ -161,3 +180,13 @@ test.describe('Form State', () => {
     await cdpSession.detach()
   })
 })
+
+async function createPost(overrides?: Partial<Post>): Promise<Post> {
+  return payload.create({
+    collection: 'posts',
+    data: {
+      title: 'Post Title',
+      ...overrides,
+    },
+  }) as unknown as Promise<Post>
+}
diff --git a/tsconfig.base.json b/tsconfig.base.json
index c9793d25c..e2b64e3bc 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -31,7 +31,7 @@
       }
     ],
     "paths": {
-      "@payload-config": ["./test/_community/config.ts"],
+      "@payload-config": ["./test/form-state/config.ts"],
       "@payloadcms/admin-bar": ["./packages/admin-bar/src"],
       "@payloadcms/live-preview": ["./packages/live-preview/src"],
       "@payloadcms/live-preview-react": ["./packages/live-preview-react/src/index.ts"],