How to use React refs to focus a Redux Form field?

Question

I am trying to use React refs to focus a Redux-Form Field when it mounts.

When I try this.refs.title.getRenderedComponent().focus() in componentDidMount, an error is thrown saying:

edit_fund.js:77 Uncaught TypeError: Cannot read property 'getRenderedComponent' of undefined

When I console.log this.refs, it is mostly an empty object and sometimes identifies 'title' as being a ref, but it is not dependable.

Am I using refs incorrectly? My code is below for reference.

componentDidMount = () => {
  this.refs.title
  .getRenderedComponent()
  .focus();
}

...

 <Field
    id="title"
    name="title"
    component={FormInput}
    type="text"
    ref="title" withRef
 />

This is weird, your code looks fine, please show the entire component code — Freez, Feb 25 '17 at 18:45
I got something similar to this working *if* the component type is a simple type like `input`. User defined components will yield refs, but they are not DOM elements that support calls like `focus()`. Instead they are React elements. — killthrush, Nov 22 '17 at 00:58

Bartek Fryzowicz · Accepted Answer · 2017-02-25T19:13:45.773

7

Please try setting ref using callback function:

ref={(input) => { this.title = input; }}

and then use this to get underlying DOM node:

ReactDOM.findDOMNode(this.title).focus();

of if DOM input element is wrapped in another element:

ReactDOM.findDOMNode(this.title).getElementsByTagName("input")[0].focus()

According to React docs using refs with a string have some issues. Please check docs for more details.

edited Feb 25 '17 at 19:13

answered Feb 25 '17 at 18:55

Bartek Fryzowicz

6,464
18
27

What if the redux form is defined in a functional component rather than a class? – Matthew Francis Dec 24 '20 at 02:36

score 0 · Answer 2 · answered Nov 19 '18 at 10:33

I use redux-form and Material UI and had to do the following. MaterialCheckboxField and MaterialTextField are custom components in my project wrapping material-ui/{Checkbox,TextField}.

I converted MaterialTextField to a class component (as stipulated in the React docs).

You may not use the ref attribute on function components because they don’t have instances.

import { findDOMNode } from "react-dom";

The field setting focus (within the render() method):

<Field
  component={MaterialCheckboxField}
  label="Checkbox"
  name="..."
  onClick={event => {
    if (!event.target.checked) return;
    // focus() field after grace period
    // oddity of Material UI, does not work without
    window.setTimeout(() => this.textField.focus(), 150);
  }}
/>

Material UI specific
Suggestion to allow a grace period using setTimeout() from this SO question. Consider @Lukas' comment:

"This code may throw. What would be even better is to save setTimeout() returned ID to component and on componentWillUnmount() check if the timeout is still there and clear it if so"

The field that will receive focus (within the render() method):

<Field
  component={MaterialTextField}
  label="Text field"
  name="..."
  ref={ref => {
    const node = findDOMNode(ref);
    if (node) {
      // Material UI wraps input element, 
      // use querySelector() to obtain reference to it
      // if not using MUI, querySelector() likely not needed
      this.textField = node.querySelector("input");
    }
  }}
  withRef
/>

Note
I am using Material UI 0.x, not sure if that's why React.CreateRef() didn't work for me (the recommended approach since React 16.3).

I have tried your solution It works but with that i am not able to next textbox it stuck on single input box. please help me. — Madhur, Aug 09 '19 at 13:15

How to use React refs to focus a Redux Form field?

2 Answers2

Linked