[Dialog] Form + scroll in DialogContent

[bogdansoare]

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

I know this has been discussed in #12126, but there is still an issue with the scrolling, the title and the actions aren't fixed and they scroll

Here is the codesandbox: https://codesandbox.io/s/qlo16r5v59

Here is the code

<Dialog open aria-labelledby="form-dialog-title">
  <form
    onSubmit={e => {
      alert("form submit!");
      e.preventDefault();
    }}
  >
    <DialogTitle id="form-dialog-title">Log in</DialogTitle>
    <DialogContent>
      <DialogContentText>
        Please enter your account number and password.
      </DialogContentText>
      <TextField
        autoFocus
        margin="dense"
        label="Account Number"
        type="text"
        fullWidth
      />
      <TextField
        margin="dense"
        label="Password"
        type="password"
        fullWidth
      />
      <div style={{ height: 1000 }} />
    </DialogContent>
    <DialogActions>
      <Button onClick={() => alert("cancel")} color="primary">
        Cancel
      </Button>
      <Button
        type="submit"
        onClick={() => alert("login")}
        color="primary"
        variant="contained"
      >
        Log in
      </Button>
    </DialogActions>
  </form>
</Dialog>

[oliviertassinari]

Should this demo https://material-ui.com/demos/dialogs/#confirmation-dialogs uses a form?

[Ethorsen]

+1 We face the same issue. I will implement that ugly fix for now.

But it would be nice to fix MUI at the source and allow <Dialog*> elements to be wrapped in a form without affecting layout/scrolling functionality.

[oliviertassinari]

@hayatae Interesting, you need to apply this CSS

      <Dialog>
        <form
          onSubmit={(event) => {
            alert('form submit!');
            event.preventDefault();
          }}
          style={{
            overflowY: 'auto',
            display: 'flex',
            flexDirection: 'column',
          }}
        >
          <DialogTitle

on the <form> element if you want to the dialog content to scroll instead of the dialog paper.

Alternatively, you can make the paper to host your form:

      <Dialog
        PaperProps={{
          component: 'form',
          onSubmit: (event) => {
            alert('form submit!');
            event.preventDefault();
          }
        }}
      >
        <DialogTitle

For modern browser, we can use display: contents: #13253 (comment)

[oliviertassinari]

I don't think that https://material-ui.com/components/dialogs/#form-dialogs is following the best practice, I believe it should have a <form> element. Fixed in #40470

[DASPRiD]

@oliviertassinari I definitely like the second solution, as one doesn't have to repeat existing CSS. The problem though is that (in the TypeScript definitions) PaperProps does not support form specific attributes like noValidate. For now I solved that by putting a @ts-ignore above it, but I assume this is actually a bug?

[oliviertassinari]

@DASPRiD noValidate should be supported. Looks like an issue.

[DASPRiD]

@oliviertassinari I think the problem is here:

https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Paper/Paper.d.ts#L5

It's using React.HTMLAttributes instead of React.AllHTMLAttributes.

[Djspaceg]

I have a different solution to this problem, which requires a slightly newer browser, but doesn't inject styling overrides.

      <Dialog>
        <form
          onSubmit={e => {
            alert("form submit!");
            e.preventDefault();
          }}
          style={{
            display: "contents"
          }}
        >
          <DialogTitle
          ...

This allows the inner flex element of Dialog to still be the operator of the flex-box container rules, and allows the children DialogTitle, DialogContent, and DialogActions to retain their flex-box children rules, allowing for correct scrolling.

display: contents; effectively removes the <form> element from the DOM layout, in the eyes of CSS, so the parent and children can interact as if it wasn't even there. As stated before, this does require a slightly newer browser, but that's ok for my case.

Setting component="form" is, in my opinion, the next best option, even though this causes awkward Typescript issues regarding the event handler in my case.

It'd be great to have first-class support for a "FormDialog" component exported out of MaterialUI which did this component-override in a few lines: (with appropriate typescript mappings)

const FormDialog = (props) => <Dialog {...props} component="form" />;

Or at very least, an official example of the "right" way to do this, with proper Typescript definition, etc.

[michael-land]

@Djspaceg Elegant solution. I can now remove all the hacks and do it once in theme level:

    MuiDialog: {
      styleOverrides: {
        paper: {
          '& > form': {
            display: 'contents',
          },
        },
      },
    },

[wescopeland]

Beware: display: 'contents' has a major implementation bug with all versions of Safari causing its child content to be inaccessible by assistive technologies.

We are still seeing this issue in 5.0.0-beta.1.

This code does seem to fix it:

export const Form = styled("form")({
  overflowY: "auto",
  display: "flex",
  flexDirection: "column"
})

[trickreich]

overflow-y: auto on DialogContent is causing this bug... what do you guys do in such situations?