facing issue inputcontrol when I use useRefs hook about formik-chakra-ui

[suparjitoteo]

@ahmad-reza619 Hi, I believe this issue is not taken yet. Not sure if the author gonna include the fix in the next version. Not many activities here recently.

[thekaganugur]

Hi, I've been really busy, and to be honest, I probably won't have time to fix ref forwarding on all components but I will release a fix for InputControl now.

Will release a new version for other components in few days.

@ahmad-reza619 I will accept PR's if you want to contribute.

Thank you.

[suparjitoteo]

Hi @anshuopinion ,

I think it's because the component does not forward the ref.
I have the same issue. I copied the code from the repo and forwarded the ref.
Then I import the InputControl from this newly created file instead of the package.

import { Input, InputProps } from "@chakra-ui/react";
import { useField } from "formik";
import { BaseProps, FormControl } from "formik-chakra-ui/dist/form-control";
import React from "react";
import { ForwardedRef } from "react";

export type InputControlProps = BaseProps & {
  inputProps?: InputProps;
};

export const InputControl = React.forwardRef(
  (props: InputControlProps, ref: ForwardedRef<HTMLInputElement>) => {
    const { name, label, inputProps, ...rest } = props;
    const [field] = useField(name);

    return (
      <FormControl name={name} label={label} {...rest}>
        <Input {...field} id={name} {...inputProps} ref={ref} />
      </FormControl>
    );
  }
);

export default InputControl;

[ahmad-reza619]

Hello is this issue taken? i would like to help 😃