Reactstrap: AutoFocus support for Inputs, or how to ref passthrough in 16.3

Created on 15 May 2018  ·  3Comments  ·  Source: reactstrap/reactstrap

I can't seem to get refs passed through to the input fields using the Input component.

  • components: Input
  • reactstrap version #5.0.0-beta.3
  • import method npm/es
  • react version #16.3.2
  • bootstrap version #4.1.0

What is happening?

I'm trying to follow along with the new way to ref in React 16.3, following the instructions at https://reactjs.org/docs/refs-and-the-dom.html#adding-a-ref-to-a-dom-element for a simple auto-focus on a form found on a Modal component.

What should be happening?

Field autofocuses on modal display.

Error message in console

Uncaught TypeError: this.focusRef.current.focus is not a function
    at ModalRecordGame.componentDidMount (bundle.js:2359)
    at commitLifeCycles (bundle.js:28501)
    at commitAllLifeCycles (bundle.js:30172)
    at HTMLUnknownElement.callCallback (bundle.js:18817)
    at Object.invokeGuardedCallbackDev (bundle.js:18855)
    at invokeGuardedCallback (bundle.js:18904)
    at commitRoot (bundle.js:30311)
    at completeRoot (bundle.js:31219)
    at performWorkOnRoot (bundle.js:31169)
    at performWork (bundle.js:31087)

Code

constructor(props) {
  super(props);
  this.focusRef = React.createRef();
}

componentDidMount() {
  this.focusRef.current.focus();
}

render() {
  return (
    <Form>
      <FormGroup>
        <Label for="title" hidden={true}></Label>
        <Input name="title" type="textarea" rows={2} ref={this.focusRef} />
      </FormGroup>
    </Form>
  )
}

Most helpful comment

Use innerRef to get the raw input.
See #172 #583 #1006

All 3 comments

Use innerRef to get the raw input.
See #172 #583 #1006

I have recently added a helper to the component itself which allows you to focus the input via a ref to the component. This just makes it easier and more intuitive. It's not yet released though, I need to do that soon.
See e3124af9

@TheSharpieOne Thank you! I missed the helper function, love this project sooo much!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

daveonestar picture daveonestar  ·  3Comments

nitingupta910 picture nitingupta910  ·  3Comments

emlmsc picture emlmsc  ·  3Comments

clenondavis picture clenondavis  ·  3Comments

ridhwaans picture ridhwaans  ·  3Comments