Custom Input field loses focus when I type

[philmetzger]

I have this signup form with custom Input field. Now when I try typing, after the first character it loses focus. Funny thing is im pretty sure this used to work fine but all of a sudden doesnt.
I was wondering if I can borrow someones eyes to figure out why? :)

I saw this already: #882 But I tried various things from that and couldnt fix it.

Any ideas?

const SignUpForm = () => (
  <Formik
    onSubmit={async ({ email, password }) => {}}
    initialValues={{ email: '', password: '' }}
    validateOnBlur={true}
    validationSchema={validationSchema}
  >
    {({ isSubmitting }) => (
      <Form key="f2">
        <Stack spacing="l">
          <Stack.Item>
            <FormikInputField type="email" name="email" placeholder="email@example.com" />
          </Stack.Item>
          <Stack.Item>
            <FormikInputField type="password" name="password" placeholder="Enter your password" />
          </Stack.Item>
          <Stack.Item>
            <div className="flex justify-end">
              <Button size="m" type="submit" status={isSubmitting ? 'busy' : ''}>
                Sign up
              </Button>
            </div>
          </Stack.Item>
        </Stack>
      </Form>
    )}
  </Formik>
);

export default SignUpForm;

Then the custom Input field looks like this:

const FormikInputField = (props) => {
  const { name, label: upstreamLabel, onChange: upstreamOnChange, ...upstreamProps } = props;

  const label = typeof upstreamLabel !== 'string' ? '' : upstreamLabel;

  const renderInput = ({ field: { name: fieldName, value, onChange }, meta: { touched, error } }) => (
    <Input
      name={fieldName}
      value={value}
      status={touched && error ? 'invalid' : ''}
      {...upstreamProps}
      onChange={(e) => {
        upstreamOnChange && upstreamOnChange(e);
        onChange(e);
      }}
    />
  );

  return <FormikField name={name} input={renderInput} label={label} {...props} />;
};

export default FormikInputField;

[philmetzger]

Here is an even simpler example and same issue:

...
import { Formik, Form, Field } from 'formik';

const InputNew = ({ field }) => <input type="text" placeholder="Email" {...field} />;

const SignUpForm = () => (
  <Formik
    onSubmit={async ({ email, password }) => {}}
    initialValues={{ email: '', password: '' }}
    validateOnBlur={true}
    validationSchema={validationSchema}
  >
    {({ isSubmitting }) => (
      <Form key="f2">
        <Stack spacing="l">
          <Stack.Item>
            <Field name="email" component={InputNew} />
          </Stack.Item>
          <Stack.Item>
            <div className="flex justify-end">
              <Button size="m" type="submit" status={isSubmitting ? 'busy' : ''}>
                Sign up
              </Button>
            </div>
          </Stack.Item>
        </Stack>
      </Form>
    )}
  </Formik>
);

export default SignUpForm;

Also if I remove that function in Formik: {({ isSubmitting }) => (... then it works, but I need that for the value of isSubmitting. I dont get why in another project it works with that but a new project it doesnt?

[philmetzger]

Fixed, my fault. The Stack component was internally setting keys like this: <div key={shortid.generate()}>{item}</div> which causes the re-render