Form in dialog breaks content scrolling separately from actions

[Philipp91]

• This is a v1.x issue (v0.x is no longer maintained).
• I have searched the issues of this repository and believe that this is not a duplicate.

Context

In #6128, the use case of having a

inside a was described. @oliviertassinari referred to 1.x and dialog composition for this. Now we have 1.x and it mostly works. I'm using code very similar to the one that @oliviertassinari posted (adjusted to match new prop names):

<Dialog open={true} onRequestClose={() => {}}>
  <DialogTitle>{"Use Google's location service?"}</DialogTitle>
  <form onSubmit={this.handleSubmit}> 
    <DialogContent>
      <TextField placeholder="Name Surname" fullWidth={true} />
    </DialogContent>
    <DialogActions>
      <Button onClick={this.handleRequestClose}>Disagree</Button>
      <Button onClick={this.handleRequestClose}>Agree</Button>
    </DialogActions>
  </form>
</Dialog>

The only real difference is that my content is a longer form, which may be higher than the viewport.

Expected Behavior

The always remains at the top of the dialog, the always remain at the bottom of the dialog and only the scrolls.

Current Behavior

The entire scrolls, including title and action.

Steps to Reproduce

https://codesandbox.io/s/n70k9mmwvm

Use the code above. Make the window really small until the scroll bar appears.
Remove the and it works (Because the form content is rather small, there's only a brief period where the scrolls, then it hits 0 height and everything has to start scrolling.)

Tech	Version
Material-UI	v1.3.1
React	v16.4.1
browser	Latest Chrome

[Philipp91]

And there's another (probably related) problem that can also be seen from the same codesandbox.io example above: The should get paddingTop: 0, but it doesn't when it's inside the

, so there's a large weird-looking gap between the title and the text field.

[oliviertassinari]

@Philipp91 This should do it:

  <Dialog open={true} onRequestClose={() => {}} style={{ maxHeight: 250 }}>
    <DialogTitle>{"Use Google's location service?"}</DialogTitle>
    <form
      style={{
        display: "flex",
        flexDirection: "column"
      }}
    >
      <DialogContent>
        <TextField placeholder="Name Surname" fullWidth={true} />
      </DialogContent>
      <DialogActions>
        <Button>Disagree</Button>
        <Button type="submit">Agree</Button>
      </DialogActions>
    </form>
  </Dialog>

https://codesandbox.io/s/2zqow476w0

[Philipp91]

Thanks!

[Philipp91]

And <DialogContent style={{paddingTop: 0}}> to fix the spacing issue.