fix: form disabled interactions

packages/core/src/components/field/field.ts

@@ -3,8 +3,8 @@ export interface FieldProps {
 }
 
 export interface FieldState {
-  disabled: boolean;
+  disabled?: boolean;
   reset: () => void;
-  touched: boolean;
+  touched?: boolean;
   validity: ValidityState;
 }

packages/react/src/components/field/field.tsx

@@ -1,6 +1,5 @@
 import { c, classy, FieldProps as BaseProps, FieldState } from '@onfido/castor';
-import { useForm } from '@onfido/castor-react';
-import React, { SyntheticEvent, useEffect, useState } from 'react';
+import React, { SyntheticEvent, useState } from 'react';
 import { FieldProvider } from './useField';
 
 export { useField } from './useField';
@@ -28,40 +27,31 @@ export const Field = ({
   className,
   ...restProps
 }: FieldProps): JSX.Element => {
-  const form = useForm();
   const [field, setField] = useState<FieldState>(initial);
 
-  useEffect(() => update(form), [form]);
-
   function initial(): FieldState {
     const reset = () => setField(initial);
-    return { ...form, disabled, reset, validity: {} } as FieldState;
+    return { reset, validity: {} } as FieldState;
   }
 
   const update = (state: Partial<FieldState>) =>
     setField((field) => ({ ...field, ...state }));
 
-  const readInput = (event: SyntheticEvent<HTMLDivElement>) => {
-    const { disabled, validity } = event.target as HTMLInputElement;
-    update({ disabled, validity });
-  };
-
   return (
-    <FieldProvider value={field}>
+    <FieldProvider value={{ ...field, disabled }}>
       <div
         {...restProps}
         className={classy(c('field'), className)}
         onBlur={(event) => {
-          update({ touched: true });
-          readInput(event);
+          update({ touched: true, ...readInput(event) });
           onBlur?.(event);
         }}
         onChange={(event) => {
-          readInput(event);
+          update({ touched: true, ...readInput(event) });
           onChange?.(event);
         }}
         onInvalid={(event) => {
-          readInput(event);
+          update(readInput(event));
           onInvalid?.(event);
         }}
       />
@@ -70,3 +60,8 @@ export const Field = ({
 };
 
 export type FieldProps = BaseProps & JSX.IntrinsicElements['div'];
+
+const readInput = (event: SyntheticEvent<HTMLDivElement>) => {
+  const { disabled, validity } = event.target as HTMLInputElement;
+  return { ...(disabled != null && { disabled }), validity };
+};

packages/react/src/components/field/useField.spec.ts

@@ -1,12 +1,14 @@
-import { describe, expect, it } from '@jest/globals';
+import { describe, expect, it, jest } from '@jest/globals';
 import { useContext } from 'react';
+import { useForm } from '../form/useForm';
 import { FieldProvider, useField } from './useField';
 
+jest.mock('../form/useForm', () => ({ useForm: jest.fn() }));
 jest.mock('react', () => {
   const context = { Provider: {} };
   return {
     createContext: () => context,
-    useContext: () => context,
+    useContext: jest.fn(() => context),
   };
 });
 
@@ -19,11 +21,14 @@ describe('FieldProvider', () => {
 });
 
 describe('useField', () => {
-  it('should simply wrap useContext', () => {
-    const context = useContext(null as any);
+  it('should non-nullish-ly merge form and field state', () => {
+    const form = { disabled: true, touched: undefined };
+    (useForm as jest.Mock).mockReturnValueOnce(form);
+    const field = { disabled: undefined, validity: {} };
+    (useContext as jest.Mock).mockReturnValueOnce(field);
 
     const result = useField();
 
-    expect(result).toBe(context);
+    expect(result).toStrictEqual({ disabled: true, validity: field.validity });
   });
 });

packages/react/src/components/field/useField.ts

@@ -1,8 +1,18 @@
 import { FieldState } from '@onfido/castor';
 import { createContext, useContext } from 'react';
+import { useForm } from '../form/useForm';
 
 const FieldContext = createContext({} as FieldState);
 
-export const useField = () => useContext(FieldContext);
+export const useField = () => {
+  const form = useForm();
+  const field = useContext(FieldContext);
+
+  return { ...omitNullish(form), ...omitNullish(field) };
+};
 
 export const FieldProvider = FieldContext.Provider;
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const omitNullish = (obj: Record<string, any>) =>
+  Object.fromEntries(Object.entries(obj).filter(([, value]) => value != null));

packages/react/src/components/form/form.tsx

@@ -1,7 +1,7 @@
 import { c, classy, FormProps as BaseProps, m } from '@onfido/castor';
-import React, { FormEvent, useEffect, useState } from 'react';
+import React, { FormEvent, useState } from 'react';
 import { getFormValues } from './getFormValues';
-import { FormProvider, FormState } from './useForm';
+import { FormProvider } from './useForm';
 
 export { useForm } from './useForm';
 
@@ -13,15 +13,10 @@ export const Form = <T extends Values>({
   className,
   ...restProps
 }: FormProps<T>) => {
-  const [form, setForm] = useState({ disabled } as FormState);
-
-  useEffect(() => update({ disabled }), [disabled]);
-
-  const update = (values: Partial<FormState>) =>
-    setForm((form) => ({ ...form, ...values }));
+  const [touched, setTouched] = useState<boolean>();
 
   return (
-    <FormProvider value={form}>
+    <FormProvider value={{ disabled, touched }}>
       <form
         {...restProps}
         className={classy(c('form'), m({ disabled }), className)}
@@ -30,12 +25,12 @@ export const Form = <T extends Values>({
         }
         onInvalid={(event) => {
           event.preventDefault();
-          update({ touched: true });
+          setTouched(true);
           onInvalid?.(event);
         }}
         onSubmit={(event) => {
           event.preventDefault();
-          update({ touched: true });
+          setTouched(true);
 
           if (disabled) return;
 

packages/react/src/components/form/useForm.ts

@@ -7,6 +7,6 @@ export const useForm = () => useContext(FormContext);
 export const FormProvider = FormContext.Provider;
 
 export interface FormState {
-  disabled: boolean;
-  touched: boolean;
+  disabled?: boolean;
+  touched?: boolean;
 }