reactjsreact-final-formreact-final-form-arrays

Loosing Focus While Typing On Custom Input Field React-Final-Form-Arrays


I'm using custom component to show the text input field nothing fancy just the basic component

const CustomTextField = ({ ...rest }) => {
  return <input {...rest} />;
};

When I'm trying to using this component inside react-final-form-array for some reason I'm losing focus when typing on the input field, I guess it's because of the re-rendering.

<Field
    name={`${name}.lastName`}
    component={({ input, meta, ...rest }) => {
      return (
        <CustomTextField {...input} type="text" {...rest} />
      );
    }}
    placeholder="Last Name"
  />

here is the link to the full code on codesandbox

As you can see the "First Name" works fine but the "Last Name" losing focus while typing.

How can I fix this issue, any help is appreciated

Thanks


Solution

  • Use it like this:

    const CustomTextField = (props) => {
      return <input {...props.input} />;
    };
    

    and

    <Field 
       name={`${name}.lastName`} 
       component={CustomTextField}
       placeholder="Last Name"
    />