Setting focus on an MUI Input component when clicking outside its area

Question

I am creating an application with ReactJS and Material UI. I have an Input component inside a FormControl component. I would like to set the focus on the Input component when the user clicks in the FormControl (but still outside the Input component). How can this be achieved?

I have tried with refs but I was not able to do it:

<FormControl
    onClick={this.textInput.focus()}
    style={{ display: 'block', cursor: 'text' }}
>
<Input
  error={this.props.error}
  disabled={this.props.disabled}
  ref={(input) => { this.textInput = input; }}
/>
</FormControl>

Answer 1

I'm not very familiar with material-ui, but I think there are two problems here. Firstly, your value for onClick is not a function, so this will call focus when the component gets instantiated, on a ref that is not defined yet. You can fix this by wrapping the call: () => this.textInput.focus() (or create a method/instance property for it.)

Secondly, material-ui wraps the Input component in a withStyles higher-order component, and when you use ref, it refers to the wrapped component, which doesn't have a focus method. Instead, you can use the inputRef prop, which creates a ref to the actual input DOM element. (see https://material-ui-next.com/customization/api/#internal-components)

This code should work:

..
  <FormControl
    onClick={() => this.textInput.focus()}
    style={{ display: 'block', cursor: 'text' }}
  >
    <Input
      error={this.props.error}
      disabled={this.props.disabled}
      inputRef={(input) => { this.textInput = input; }}
    />
  </FormControl>
..