iphone when click to a form auto focus to the clicking place

Question

Sorry the title is not all that descriptive. But the images should explain what I am seeing. Basically, when a user click on a button, it should redirect him/her to that form and auto focus to the first field.

Auto Focus is WORKING. I tested it by refresh the page which is shown towards the end of the video.

The problem is instead going to the first field, it seems to always auto focus to the field where is the button is clicked. This only happens on phones. It seems like the phone is telling it to auto focus my previous touch location.

Button:

              <FlatButton
                label="Sign Up"
                className="e2e-login-page-sign-up linkButton"
                style={(Buttons.linkButton, {float: 'left'})}
                labelStyle={Buttons.buttonLabelLink}
                onTouchTap={() => navigateTo('/sign-up')}
              />

Then the form:

<TextField
          className="requiredField"
          value={this.state.confirmPassword}
          type="password"
          fullWidth={true}
          floatingLabelText="Confirm Password"
          errorText={getConfirmPasswordErrorMessage(
            this.state.password,
            this.state.confirmPassword
          )}
          errorStyle={{textAlign: 'left'}}
          underlineFocusStyle={Styles.underlineFocusStyle}
          floatingLabelStyle={Styles.floatingLabelStyle}
          floatingLabelFocusStyle={Styles.floatingLabelFocusStyle}
          onChange={(_event, value) =>
            this._handleChange(value, 'confirmPassword')}
        />

Answer 1

onTouchTap is the problem. It is going to loss its support once move on to React 16. After changing it to onClick, then it worked.

Answer 2

Try adding this code to your first name <TextField />

<TextField ref="firstname" />

Then you should be able to force focus on that textfield by adding this line to your signup button click handler

this.refs.firstname.focus()

and the first name field will be focused