React-final-form - ввод теряет фокус после каждого нажатия клавиши

Question

import React from "react";
import { Field, Form } from "react-final-form";

export function LogInDialog(props: { open: boolean; onClose: () => void }) {
  const onSubmit = vals => {
    alert(JSON.stringify(vals));
  };
    console.log("logindialog");
  return (
    <Form
      key="unique_key_0"
      onSubmit={onSubmit}
      render={({ handleSubmit, form, submitting, pristine, values }) => (
        <form onSubmit={handleSubmit} key="unique_key_1" id="unique_id_1">
          <Field
            key="unique_key_2"
            id="unique_id_2"
            name="email"
            component={({ input: { onChange, value }, label }) => (
              <input
                key="unique_key_3"
                id="unique_id_3"
                type="text"
                value={value}
                onChange={onChange}
              />
            )}
          ></Field>
        </form>
      )}
    />
  );
}

Ввод теряет фокус после каждого нажатия клавиши. В devtools я вижу, что HTML form создается заново каждый раз (мигает розовым). Однако сам компонент React проходит рендеринг только один раз.

Есть похожие вопросы, однако все они предлагают использовать уникальные ключи. Такое решение здесь не работает.

Почему вход теряет фокус снова и снова? Как мне это исправить?

https://codesandbox.io/s/busy-torvalds-91zln

Answer 1

Поскольку для компонента используется встроенная лямбда, его идентичность меняется при каждом рендеринге.

Хотя по многим другим вопросам достаточно уникального ключа, перемещение функции component за пределы главного компонента исправляет его. в целом.