How to make autofocus on input field when using react-final-form?

Question

I created a form using react-final-form. autofocus is not working. The only solution I know is to use ref feature of React. Can I autofocus the input using react-final-form library?

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

const App = () => (
  <Form
    render={({}) => (
      <form>
        <Field name="company" component="input" autofocus />
      </form>
    )}
  />
);

render(<App />, document.getElementById("root"));

Maxiemaxilla

Just FYI, this confused me a bit after reading your question and answer, but autoFocus is not a final-form thing. It's a React thing that works on any component that takes focus. Setting it here on Field just passes it through to the underlying component, which is why it works. final-form does not seem to deal with setting focus, probably because the details of how to do this would depend on the UI components you're actually using. I would suggest updating your question to reflect this :-) – Elk

Answer 1

Using capital F, autoFocus, solved my problem.

Maxiemaxilla