Feat/support custom field component, (#3858) (#3862)

.vscode/settings.json

@@ -1,3 +1,7 @@
 {
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "editor.formatOnSave": false,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  },
 }

packages/formik/src/Field.tsx

@@ -22,19 +22,19 @@ export interface FieldConfig<V = any> {
    * Field component to render. Can either be a string like 'select' or a component.
    */
   component?:
-    | string
-    | React.ComponentType<FieldProps<V>>
-    | React.ComponentType
-    | React.ForwardRefExoticComponent<any>;
+  | string
+  | React.ComponentType<FieldProps<V>>
+  | React.ComponentType
+  | React.ForwardRefExoticComponent<any>;
 
   /**
    * Component to render. Can either be a string e.g. 'select', 'input', or 'textarea', or a component.
    */
   as?:
-    | React.ComponentType<FieldProps<V>['field']>
-    | string
-    | React.ComponentType
-    | React.ForwardRefExoticComponent<any>;
+  | React.ComponentType<FieldProps<V>['field']>
+  | string
+  | React.ComponentType
+  | React.ForwardRefExoticComponent<any>;
 
   /**
    * Render prop (works like React router's <Route render={props =>} />)
@@ -72,9 +72,11 @@ export interface FieldConfig<V = any> {
   innerRef?: (instance: any) => void;
 }
 
-export type FieldAttributes<T> = GenericFieldHTMLAttributes &
+export type FieldAttributes<T> = { className?: string; } & GenericFieldHTMLAttributes &
   FieldConfig<T> &
-  T & { name: string };
+  T & {
+    name: string,
+  };
 
 export type FieldHookConfig<T> = GenericFieldHTMLAttributes & FieldConfig<T>;
 
@@ -139,6 +141,7 @@ export function Field({
   children,
   as: is, // `as` is reserved in typescript lol
   component,
+  className,
   ...props
 }: FieldAttributes<any>) {
   const {
@@ -202,14 +205,14 @@ export function Field({
       const { innerRef, ...rest } = props;
       return React.createElement(
         component,
-        { ref: innerRef, ...field, ...rest },
+        { ref: innerRef, ...field, ...rest, className },
         children
       );
     }
     // We don't pass `meta` for backwards compat
     return React.createElement(
       component,
-      { field, form: formik, ...props },
+      { field, form: formik, ...props, className },
       children
     );
   }
@@ -221,10 +224,10 @@ export function Field({
     const { innerRef, ...rest } = props;
     return React.createElement(
       asElement,
-      { ref: innerRef, ...field, ...rest },
+      { ref: innerRef, ...field, ...rest, className },
       children
     );
   }
 
-  return React.createElement(asElement, { ...field, ...props }, children);
+  return React.createElement(asElement, { ...field, ...props, className }, children);
 }

packages/formik/test/Field.test.tsx

@@ -100,8 +100,10 @@ describe('Field / FastField', () => {
 
   describe('renders an <input /> by default', () => {
     it('<Field />', () => {
-      const { container } = renderForm(<Field name="name" />);
+      const className = 'field-custom'
+      const { container } = renderForm(<Field name="name" className={className} />);
       expect(container.querySelectorAll('input')).toHaveLength(1);
+      expect(container.querySelector(`.${className}`)?.getAttribute('value')).toEqual('jared')
     });
 
     it('<FastField />', () => {
@@ -110,6 +112,22 @@ describe('Field / FastField', () => {
     });
   });
 
+  describe('renders an <input /> with className', () => {
+    it('<Field />', () => {
+      const className = 'field-custom'
+      const { container } = renderForm(<Field name="name" className={className} />);
+      expect(container.querySelectorAll(`.${className}`)).toHaveLength(1)
+      expect(container.querySelector(`.${className}`)?.getAttribute('value')).toEqual('jared')
+    });
+
+    it('<FastField />', () => {
+      const className = 'field-custom'
+      const { container } = renderForm(<FastField name="name" className={className} />);
+      expect(container.querySelectorAll(`.${className}`)).toHaveLength(1)
+      expect(container.querySelector(`.${className}`)?.getAttribute('value')).toEqual('jared')
+    });
+  });
+
   describe('receives { field, form, meta } props and renders element', () => {
     it('<Field />', () => {
       let injected: FieldProps[] = [];