Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

<form> onSubmit within <DialogContent> not triggered by children <TextFields>

See original GitHub issue

This is a v1.x issue.
This is a v3.x issue.
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

Put a form within a dialog content.
Put a TextField within that form.
Add an onSubmit handler as props of that form.
Run it live, open the dialog, type something on the textfields, press enter
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>