title: Influence tab order of Material UI controls
body: <p>I have an app built up with React and Material UI. Within one view it is possible to have several text fields and several buttons. Now, when I have the focus on one text field and then press <kbd>Tab</kbd> I cannot reliably anticipate which one of the controls will be the next one to get the focus. I want to first tab through all the text fields and then secondly tab through all the buttons.</p>
  
  <p><a href="https://i.stack.imgur.com/xY97H.png" rel="noreferrer"><img src="https://i.stack.imgur.com/xY97H.png" alt="enter image description here"></a></p>
  
  <pre><code>&lt;DialogContent&gt;
      &lt;DialogContentText&gt;
          The username and password that were used are incorrect. Please provide the correct credentials in order to login to the API.
          &lt;Stepper activeStep={this.state.credentialsStep} orientation='vertical'&gt;
              {
                  this.steps.map((label, index) =&gt; (
                      &lt;Step key={label}&gt;
                          &lt;StepLabel&gt;{label}&lt;/StepLabel&gt;
                          &lt;StepContent&gt;
                              &lt;Typography&gt;{this.stepContent[index]}&lt;/Typography&gt;
                              {this.stepAction[index]}
                              &lt;Grid container direction='row' className='m-t-26'&gt;
                                  &lt;Button color='primary'
                                          onClick={() =&gt; {
                                      this.state.credentialsStep === 0 ? this.onClickCancel() : this.onClickBack();
                                  }}&gt;
                                      {this.state.credentialsStep === 0 ? 'Cancel' : 'Back'}
                                  &lt;/Button&gt;
                                  &lt;Button variant='contained'
                                          color='primary'
                                          onClick={() =&gt; {
                                      this.state.credentialsStep === this.steps.length - 1 ? this.onClickLogin() : this.onClickNext();
                                  }}&gt;
                                      {this.state.credentialsStep === this.steps.length - 1 ? 'Login' : 'Next'}
                                  &lt;/Button&gt;
                              &lt;/Grid&gt;
                          &lt;/StepContent&gt;
                      &lt;/Step&gt;
                  ))
              }
          &lt;/Stepper&gt;
      &lt;/DialogContentText&gt;
  &lt;/DialogContent&gt;
  </code></pre>
  
  <p>Is there a way to set the tab order of controls?</p>