Material-ui: <form> onSubmit within <DialogContent> not triggered by children <TextFields>

[davalapar]

• [x] This is a v1.x issue.
• [x] This is a v3.x issue.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Form within dialog content should submit when you press enter on textfields inside it.

Current Behavior

Form within dialog content does not submit.

Steps to Reproduce

1. Put a form within a dialog content.
2. Put a TextField within that form.
3. Add an onSubmit handler as props of that form.
4. Run it live, open the dialog, type something on the textfields, press enter
5. It should submit, but it won't.

Test Case:

• https://codesandbox.io/s/3yr35p840p
• https://3yr35p840p.codesandbox.io/
• it should alert('form submit!'); when you press enter within the textfields but it won't

Context

• The function, when executed through the button, works.
• The onSubmit={(e) => {e.preventDefault(); executeSomething();}} works in other pages of the app.
• I have tried adding an id to the form, then executing $('#loginForm').submit(); on the console.. it works, so it tells me that the onSubmit handler has latched on appropriately but it appears that the elements inside it fails to see it? (not sure).

            <Dialog
              fullScreen={fullScreen}
              open={loginFormVisibility}
              onClose={toggleLoginForm}
              aria-labelledby="form-dialog-title"
            >
              <DialogTitle id="form-dialog-title">
                Log in
              </DialogTitle>
              <DialogContent>
                <DialogContentText>
                  Please enter your account number and password.
                </DialogContentText>
                <form
                  id="loginForm"
                  onSubmit={(e) => {
                    console.log('form submit!');
                    e.preventDefault();
                    executeLogin();
                  }}
                >
                  <TextField
                    autoFocus
                    inputProps={{
                      className: classes.accountNumberInput,
                    }}
                    margin="dense"
                    value={username}
                    label="Account Number"
                    type="text"
                    onChange={setUsername}
                    fullWidth
                  />
                  <TextField
                    margin="dense"
                    value={password}
                    label="Password"
                    type={passwordVisibility === true ? 'text' : 'password'}
                    onChange={setPassword}
                    fullWidth
                  />
                </form>
                <FormControlLabel
                  control={(
                    <Checkbox
                      checked={passwordVisibility}
                      onChange={togglePasswordVisibility}
                      color="primary"
                    />
                  )}
                  label="show password"
                />
              </DialogContent>
              <DialogActions>
                <Button onClick={toggleLoginForm} color="primary">
                  Cancel
                </Button>
                <Button onClick={executeLogin} color="primary" variant="contained">
                  Log in
                </Button>
              </DialogActions>
            </Dialog>

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | v3.0.0 |
| React | 16.4.1 |
| Browser | Chrome x64 latest |
| TypeScript | nopes |

[davalapar]

Test Case:

• https://codesandbox.io/s/3yr35p840p
• https://3yr35p840p.codesandbox.io/
• it should alert('form submit!'); when you press enter within the textfields but it won't

[support[bot]]

👋 Thanks for using Material-UI!

We use the issue tracker exclusively for bug reports and feature requests, however,
this issue appears to be a support request or question. Please ask on StackOverflow where the
community will do their best to help. There is a "material-ui" tag that you can use to tag your
question.

If you would like to link from here to your question on SO, it will help others find it.
If your issues is confirmed as a bug, you are welcome to reopen the issue using the issue template.

[oliviertassinari]

@davalapar This is a DOM question. In order to have a working enter submit capabilities, you need to have a button type=submit and the input under the same form.
https://codesandbox.io/s/n5n31m8lj4

[davalapar]

Oh my fucking god thanks for enlightening me!

[optimista]

So what's the most recommended / used convention in here? Putting DialogContent into form element?

<form onSubmit={handleSubmit}>
  <DialogContent>
  </DialogContent>
  <DialogActions>
  </DialogActions>
</form>

[oliviertassinari]

See #13253