Search code examples
reactjsreact-final-formfinal-form

Blur Any Focused Field onSubmit | React Final Form

This might be a bug, but I wanted to post here before I open a GitHub issue to see if the community at large has advice, or if someone can just call me out for doing it wrong.

I want to blur any focused field onSubmit. Simple.

According to the docs, the onSubmit function is passed (values, form) as arguments, and the form api includes ways to get all registered fields, and a method for supposedly bluring any field. Here's the code: 

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

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

I forked the basic example directly from FinalForms docs, and added those two lines to see if I could get their example to work, but it did not. To test, just type into the firstname field, and press your enter key. The field stays focused..

CodeSandbox Demo Here

Final Form: FormApi Docs

Thanks for reading!

Solution

  • 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().