getRenderedComponent() method returns TextField instead of <input />

When i am trying to get rendered component by using method getRenderedComponent() it returns TextField which is passed as component to Field as follows-

<Field type="text" onKeyUp={this.focusNextField} ref="dateFieldRef" withRef maxLength="2" className="form-control zero-padding background-yellow-white" component={TextField} id="date" name="date" placeholder={Strings.day}/> While i pass ‘input’ as component in this upper snippet it just works fine since getRenderedComponent() returns input element.

I tried to access the focus method as follows- this.refs.monthFieldRef.getRenderedComponent().getRenderedComponent().focus(); but it fails with following error- Uncaught TypeError: this.refs.monthFieldRef.getRenderedComponent(...).getRenderedComponent is not a function

I want to access the focus() method of the underlying input element. How am i suppose to call focus() on this TextField component or i am missing something? I am using redux-form v6.6.3

[romseguy]

I struggled a bit with this so here’s the full solution:

@reduxForm({...})
class Form extends Component {
  focus() {
    this.foo.getRenderedComponent().focusInput()
  }

  render() {
    return (
      <Field
        name="foo"
        component={CustomField}
        type="text"
        ref={node => this.foo = node}
        withRef
      />
    )
  }
}

and

class CustomField extends Component {
  focusInput() {
    this.input.focus()
  }

  render() {
    const {
      input,
      type,
      meta: {touched, error}
    } = this.props

    return (
      <UIForm.Field error={touched && error}>
        <input {...input} ref={node => this.input = node} type={type}/>
      </UIForm.Field>
    )
  }
}

[gear54rus]

@gustavohenke the thing above needs to be in docs, it really puts things into perspective.

@romseguy thanks!