title: autoFocus on input when opening modal does not work - React Bootstrap
body: <p>I have a modal that has 3 components. Each component represents a stage, so for example the first component is inputing the user's first name when the user click next, and it will go to the next component, which is inputing address and then user clicks next and it will take the user to the last stage, inputing a nickname. On every <code>input</code> element from the components, it will have an <code>autoFocus</code>.  So far in the last two components, the <code>inputs</code> have an autoFocus except for the first component.</p>
  
  <p>Not sure why the first doesn't have it, when I initialise the modal I see the <code>input</code> doesn't have the <code>autoFocus</code>, then I hit next then the second component <code>input</code> has it and I go back to the first component - hit the back button - then I see the <code>input</code> from the first component has an <code>autoFocus</code>. Very strange, I've been trying so many way to resolve this, from setting <code>autoFocus={false}</code> to the modal, creating a <code>ref</code> for the first input but still not working.</p>
  
  <p>It looks like it's an issue with the modal, where it's initialized the focus is somewhere but not on the <code>input</code>.  Has anyone encountered this issue?</p>
  
  <p>Example (pseudo) code</p>
  
  <pre><code>//Component Hosting the modal
  
  render(){
  
      if(this.state.modal_stage === 1){
          &lt;FirstName /&gt;
      }else if(this.state.modal_stage === 2){
          &lt;LasgtName /&gt;
  
      }else if(this.state.modal_stage === 3){
          &lt;NickName /&gt;
      }
      return(
  
          &lt;Modal 
              dialogClassName="locationModal customModal"
              show={this.state.modalShow} onHide={this.hideModal}
              autoFocus="false"&gt;
              &lt;Modal.Header&gt;
                  &lt;div className="closeModal" onClick={this.hideModal}&gt;&lt;/div&gt;
              &lt;/Modal.Header&gt;
  
              &lt;Modal.Body&gt;
  
                  { current_stage}
  
              &lt;/Modal.Body&gt;
  
              &lt;Modal.Footer&gt;
                  {backButton}
                  {nextButton}
              &lt;/Modal.Footer&gt;
  
          &lt;/Modal&gt;
  
  
      );
  }
  
  
  //&lt;FirstName /&gt; component
  
  constructor(props){
      super(props)
      this.inputRef = React.createRef();
  }
  
  componentDidMount(){
      this.inputRef.current.focus();
  }
  
  ....
  
  render(){
  
  
      return(
          &lt;div&gt;
              &lt;input type="text" placeholder="firstName" ref={this.inputRef}/&gt;
          &lt;/div&gt;
      );
  }
  </code></pre>
  
  <p>Your help will be appreciated!!</p>
  
  <p><strong>Note:</strong></p>
  
  <p>I tried to set this <code>autoFocus="false"</code> to <code>autoFocus={false}</code> in the modal but the issue still remains.</p>