react-bootstrap: React 16: Modal.Body input refs no longer usable from componentDidUpdate() in parent

We render input controls within the modal body which sometimes need initialization such as a setSelectionRange() applied once shown. Prior to React 16, we did this by acquiring a ref to the input control rendered within the modal body, then applied the setSelectionRange via the ref within componentDidUpdate() on the modal’s containing component. Worked fine.

Starting with React 16, we find componentDidUpdate() in the parent component executes before the ref functions on the input controls, thus the refs are undefined. componentDidUpdate() doesn’t run again, so we don’t have an opportunity to do much else other than utilize a setTimeOut() to wait for the ref to be ready.

Is this expected behavior? Psuedocode below:

class Container extends Component {
    inputRef = null;

    componentDidUpdate() {
         // this.inputRef is null here in v16
         // this.inputRef.setSelectionRange() works in v15, works in v16 only with setTimeout()
    }

    render() {
        <Modal show={true}>
              <Modal.Body>
                   <input ref={(ref) => { this.inputRef = ref; }}>
              </Modal.Body>
        </Modal>
    }
}

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Comments: 27 (7 by maintainers)

Most upvoted comments

The issue is still there in 0.32.1.