Fix #1051: Make types compatible with React Native

Changed element type parameter from 'T extends HTMLElement = HTMLElement'
to 'T = any' to support both web and React Native environments.

HTMLElement doesn't exist in pure React Native (without react-native-web),
which broke type checking for React Native users in v7.0.0.

Changes:
- FieldInputProps: Changed T from 'extends HTMLElement = HTMLElement' to '= any'
- FieldRenderProps: Changed T from 'extends HTMLElement = HTMLElement' to '= any'
- FieldProps: Changed T from 'extends HTMLElement = HTMLElement' to '= any'
- Field component: Updated generic constraint to match
- useField hook: Updated generic constraint to match
- Added FieldMetaState type export for backward compatibility
- Fixed getIn call to handle undefined initialValues

All existing tests pass. TypeScript build succeeds.

Author: erikras-dinesh-agent

src/Field.tsx

@@ -5,7 +5,7 @@ import useField from "./useField";
 
 function FieldComponent<
   FieldValue = any,
-  T extends HTMLElement = HTMLElement,
+  T = any,
   FormValues = Record<string, any>,
 >(
   {
@@ -95,7 +95,7 @@ function FieldComponent<
 // Create a properly typed forwardRef component that preserves generics
 const Field = React.forwardRef(FieldComponent as any) as <
   FieldValue = any,
-  T extends HTMLElement = HTMLElement,
+  T = any,
   FormValues = Record<string, any>,
 >(
   props: FieldProps<FieldValue, T, FormValues> & { ref?: React.Ref<T> },

src/types.ts

@@ -15,10 +15,7 @@ export interface ReactContext<FormValues = Record<string, any>> {
   reactFinalForm: FormApi<FormValues>;
 }
 
-export interface FieldInputProps<
-  FieldValue = any,
-  T extends HTMLElement = HTMLElement,
-> {
+export interface FieldInputProps<FieldValue = any, T = any> {
   name: string;
   onBlur: (event?: React.FocusEvent<T>) => void;
   onChange: (event: React.ChangeEvent<T> | any) => void;
@@ -31,7 +28,7 @@ export interface FieldInputProps<
 
 export interface FieldRenderProps<
   FieldValue = any,
-  T extends HTMLElement = HTMLElement,
+  T = any,
   _FormValues = any,
 > {
   input: FieldInputProps<FieldValue, T>;
@@ -58,6 +55,10 @@ export interface FieldRenderProps<
   };
 }
 
+// Backward compatibility: Export FieldMetaState type
+export type FieldMetaState<FieldValue = any> =
+  FieldRenderProps<FieldValue>["meta"];
+
 export interface SubmitEvent {
   preventDefault?: () => void;
   stopPropagation?: () => void;
@@ -120,7 +121,7 @@ export interface UseFieldConfig extends UseFieldAutoConfig {
 
 export interface FieldProps<
   FieldValue = any,
-  T extends HTMLElement = HTMLElement,
+  T = any,
   _FormValues = Record<string, any>,
 > extends UseFieldConfig,
     Omit<RenderableProps<FieldRenderProps<FieldValue, T>>, "children"> {

src/useField.ts

@@ -29,11 +29,10 @@ const defaultParse = (value: any, _name: string) =>
 
 const defaultIsEqual = (a: any, b: any): boolean => a === b;
 
-function useField<
-  FieldValue = any,
-  T extends HTMLElement = HTMLElement,
-  FormValues = Record<string, any>,
->(name: string, config: UseFieldConfig = {}): FieldRenderProps<FieldValue, T> {
+function useField<FieldValue = any, T = any, FormValues = Record<string, any>>(
+  name: string,
+  config: UseFieldConfig = {},
+): FieldRenderProps<FieldValue, T> {
   const {
     afterSubmit,
     allowNull,
@@ -117,7 +116,10 @@ function useField<
     // If no existing state, create a proper initial state
     const formState = form.getState();
     // Use getIn to support nested field paths like "user.name" or "items[0].id"
-    const formInitialValue = getIn(formState.initialValues, name);
+    const formInitialValue = getIn(
+      formState.initialValues || ({} as FormValues),
+      name,
+    );
 
     // Use Form initialValues if available, otherwise use field initialValue
     let initialStateValue = formInitialValue !== undefined ? formInitialValue : initialValue;