Material-ui: Dialog component cant be submit using actions, but only submit button inside body of the Dialog.

[ozluy]

Dialog component cant be submit using actions, but only submit button inside body of the Dialog.

Test Case

http://www.webpackbin.com/4JvmacqOM

Versions

• Material-UI: 0.17.0
• React: 15.3.2
• Browser: Chrome 56.0.2924.87

[oliviertassinari]

Could you provide a reproduction test case? That would help a lot 👷 .
It could be a code sample or a live example. You can use this playground to do so: http://www.webpackbin.com/4yeaqq5_z. Thanks!

[ozluy]

Added test case:
http://www.webpackbin.com/4JvmacqOM

[oliviertassinari]

@ozluy Thanks for the reproduction test case.

That pattern do not work and it's expected. The <Dialog /> component render the DOM outside of his parent. That's done in order to avoid overflow: hidden issues.

<form onSubmit={this.handleSubmit}> 
  <Dialog
    title="Dialog With Post Problem"
    actions={actions}
    modal={false}
    open={this.state.open}
    onRequestClose={this.handleClose}
  >
    <TextField hintText="Name Surname" fullWidth={true} />
  </Dialog>
</form>

I don't have any workaround. We have addressed that issue on the next branch by embracing composition. You can do the following:

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

[ralphstodomingo]

Any updates about this?

[oliviertassinari]

@ralphstodomingo What do you mean by update?

[ralphstodomingo]

@oliviertassinari Sorry, is it correct to assume that dialog composition comes in the next major version? Thanks for all your hard work.

[oliviertassinari]

Yes, it is. You can find the documentation here.

[marcusjwhelan]

If anyone else comes by this and still cannot get it to work and look right this should make it look just like normal and work.

`<Dialog
      title={this.props.title}
      open={this.props.open}
 >
      <form onSubmit={handleSubmit(this.localSubmit.bind(this))} >
             <div>
                  <Field
                         title="title"
                         name="name"
                         type="text"
                         required
                         style={styles}
                         component={renderTextField}
                    />
             </div>
                    <FlatButton
                           style={{
                                display:      'inline-block',
                                float: 'right',
                           }}
                           label="Submit"
                           type="submit"
                           primary={true}
                      />
                      <FlatButton
                           style={{
                                display:      'inline-block',
                                float: 'right',
                           }}
                           label="Cancel"
                           primary={true}
                           onTouchTap={this.props.handleEditClose()}
                      />
          </form>
  </Dialog>`

[antonfisher]

I fixed this using button form="my-form-id" attribute and form id="my-form-id" attribute, works in HTML5.
```javascript
return (
open
title="Form issue"
actions={[

]}
>

);
````
I'm currently on material-ui v0.20.