React-final-form: Input losing focus after every character written

[vlopp]

Are you submitting a bug report or a feature request?

Bug report.

What is the current behavior?

<form> is created anew after every keystroke. It causes its child Fields and inputs to lose focus.

inputs provided to Fields as their component props are created anew after every keystroke. This causes them to lose focus, despite having an unique, constant key.

What is the expected behavior?

<form> does not rerender after every keystroke, inputs stay focused.

inputs do not unmount/mount after every keystroke and stay focused.

Sandbox Link

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

UPDATE:

The <form> is not recreated over and over again. The inputs, however, are.

[PerfectPixel]

Could you elaborate a bit on the environment you are seeing this error?

Running macOS catalina and latest chrome, everything works as expected and there is no loss of focus.

[vlopp]

Could you elaborate a bit on the environment you are seeing this error?

Running macOS catalina and latest chrome, everything works as expected and there is no loss of focus.

Apologies, I must've uploaded the wrong sample in a hurry. It's updated now.

This one works fine:

<input component="input"  (other props) />

This one suffers from the issue described above.

            component={props => (
              <input key="3unique_key_3" id="3unique_id_3" {...props.input} />
            )}

[vlopp]

Alright, silly me. Because I've used an inline lambda for the component, its identity changes every render. I believe due to an unique key it should work regardless.

Moving it outside the master component fixes it.

[hholmes]

@vlopp I've been dealing with a similar issue, would you mind elaborating just a tad on how you re-organized your input component to resolve the issue?

_Update_
I realized based on the related StackOverflow outcome what you meant: move the definition of the input component outside the parent to the root of the file itself.

const FormParent = () => {
   const inputComponent = () => {}
   <Form ... />
      <Field
         component={ inputComponent }

becomes

const inputComponent = () => {} 
const FormParent = () => {
   <Form ... />
      <Field
         component={ inputComponent }