Submit a form using Enter key with "@material-ui/core/Button" in react.js

Question

Here is my form in render method which is for user sign-in.

<form onSubmit={this.handleSubmit}>
  <Avatar className={classes.avatar}>
    <LockOutlinedIcon />
  </Avatar>
  <Typography component="h1" variant="h5">
    Sign in
  </Typography>

  <TextField variant="outlined" margin="normal" fullWidth id="email"
    label="Email Address" name="email" onChange={this.handleEmailChange}
  />
  <TextField variant="outlined" margin="normal" fullWidth
    name="password" onChange={this.handlePasswordChange}
  />
  {loginError && (
    <Typography component="p" className={classes.errorText}>
      Incorrect email or password.
    </Typography>
  )}

  <Button type="button" fullWidth variant="contained" color="primary"
    className={classes.submit} onClick={this.handleSubmit}
  >
    Sign In
  </Button>
</form>

And the following is my handle submit method.

handleSubmit = () => {
  const { dispatch } = this.props;
  const { email, password } = this.state;
  dispatch(loginUser(email, password));
};

How can I submit the form by pressing the Enter key? I am using the standard Material UI Button component.

Dharman · Accepted Answer · 2020-03-21 17:10:14Z

33

Try the following by making the button of type "submit" instead. This should enable form submit using the enter key:

<Button type="submit" fullWidth variant="contained" color="primary" className={classes.submit}>
  Sign In
</Button>

Also with type "submit" you don't need onClick, because clicking a submit button triggers the form submit event by default.

edited Mar 21, 2020 at 17:10

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered Nov 4, 2019 at 19:36

Alexander Staroselsky

39k16 gold badges83 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ali Rehman Over a year ago

Now it's working. I had to use event.preventDefault() in handleSubmit to stop reloading page. Thanks for your help :)

Govinda Malavipathirana · Accepted Answer · 2019-11-04 19:38:12Z

1

You have to use type="submit" as for the button Ex:

    <Button 
        type="submit" 
        fullWidth 
        variant="contained"
        color="primary"
        className={classes.submit}
    >
        Sign In
    </Button>

answered Nov 4, 2019 at 19:38

Govinda Malavipathirana

1,1412 gold badges11 silver badges31 bronze badges

Comments

L. Pier Roberto · Accepted Answer · 2020-03-02 21:35:17Z

1

Adding type=submit in Button did not work for me. You could try with this solution here. It uses a UseEffect hook which works in React.

answered Mar 2, 2020 at 21:35

L. Pier Roberto

8113 gold badges9 silver badges24 bronze badges

1 Comment

Larcho Over a year ago

Chances are, your <Button> is not inside a <form>

Collectives™ on Stack Overflow

Submit a form using Enter key with "@material-ui/core/Button" in react.js

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related