FormAPI#blur() is not working.

[Trevor Blackman]

Bug report; form.blur() may not be working.

What is the current behavior?

In my onSubmit function, I get passed values, form. I want to use the form api to blur any fields that were in focus when the form was submitted, but they are not blurred.

What is the expected behavior?

Fields that have focus when the form is submitted should lose focus.

Code Attempted

const onSubmit = async (values, form) => {
  const fieldNames = form.getRegisteredFields();
  fieldNames.forEach(name => form.blur(name));

  await sleep(300);
  window.alert(JSON.stringify(values, 0, 2));
};

Sandbox Link

To reproduce, simply type a name in the name field and press your enter key. Also, look at the lines I edited; 11, 12. The demo was forked directly from the basic demo in the React FF docs.
CodeSandbox Demo

What's your environment?

"react": "^16.10.2",
"react-final-form": "^4.1.0",

Other information

Using react, but the issue is with the formApi, so I thought opening issue here was more accurate. Idk... Thanks for looking!

[Trevor Blackman]

Answered by Erik R. on StackOverflow;

form.blur() is how you tell Final Form that the field has been blurred (it marks the field's state as being blurred). It's more of a listener. To actually imperatively blur the field, you'll need a reference to the DOM element.

Something like getElementById('myField').blur().

https://stackoverflow.com/questions/58466024/blur-any-focused-field-onsubmit-react-final-form