diff --git a/.changeset/long-walls-own.md b/.changeset/long-walls-own.md new file mode 100644 index 000000000..01d791142 --- /dev/null +++ b/.changeset/long-walls-own.md @@ -0,0 +1,5 @@ +--- +'formik': minor +--- + +Enhanced the typing within the `Field` component, rectifying a prior issue that had resulted in all props being implicitly assigned the type of `any`. diff --git a/packages/formik/src/Field.tsx b/packages/formik/src/Field.tsx index 5e33d8331..fb8b8962c 100644 --- a/packages/formik/src/Field.tsx +++ b/packages/formik/src/Field.tsx @@ -23,17 +23,16 @@ export interface FieldConfig { */ component?: | string - | React.ComponentType> - | React.ComponentType + | React.ComponentType & { className?: string }> + | React.ComponentType | React.ForwardRefExoticComponent; /** * Component to render. Can either be a string e.g. 'select', 'input', or 'textarea', or a component. */ as?: - | React.ComponentType['field']> + | React.ComponentType & { className?: string }> | string - | React.ComponentType | React.ForwardRefExoticComponent; /** @@ -73,8 +72,7 @@ export interface FieldConfig { } export type FieldAttributes = { className?: string; } & GenericFieldHTMLAttributes & - FieldConfig & - T & { + FieldConfig & { name: string, }; @@ -134,7 +132,7 @@ export function useField( return [getFieldProps(props), getFieldMeta(fieldName), fieldHelpers]; } -export function Field({ +export function Field({ validate, name, render, @@ -143,7 +141,7 @@ export function Field({ component, className, ...props -}: FieldAttributes) { +}: FieldAttributes) { const { validate: _validate, validationSchema: _validationSchema, @@ -187,8 +185,8 @@ export function Field({ unregisterField(name); }; }, [registerField, unregisterField, name, validate]); - const field = formik.getFieldProps({ name, ...props }); - const meta = formik.getFieldMeta(name); + const field = formik.getFieldProps({ name, ...props }); + const meta = formik.getFieldMeta(name); const legacyBag = { field, form: formik }; if (render) {