Form in Material UI Dialog using React

Question

I am trying to get a form working inside of a Material UI Dialog component. If I wrap the Dialog in the form tags, they do not even show up in the resulting html (no idea why yet)...

<form onSubmit={someFunction}>
  <Dialog>
    ...
  </Dialog>
</form>

If I reverse it and put the form tags inside the Dialog, the form elements show up in the resulting html, but then the action button set to type="submit" will not fire the form's onSubmit.

<Dialog>
  <form onSubmit={someFunction}>
    ...
  </form>
</Dialog>

Has anyone had any success getting this combination to work? I know I can just call the function directly from the action button click, but I am also using Redux Form and have other non-dialog forms in the app, so I have it bound to the form element. So I really need to invoke the form submit from a Dialog somehow.

theUtherSide · Accepted Answer · 2016-10-07 05:32:48Z

10

Actually - I have/had the onSubmit={handleSubmit(this.myFunction)} to begin with and that was not the issue. The issue turned out to be how Material UI mounts the Dialog (which apparently is different than react-toolbox). They mount it on the body - I assume for easier positioning - so anything outside of the Dialog is ignored.

With the form inside the Dialog, the buttons are outside the form (which is again apparently different than react-toolbox). So to make it work, you have to use the HTML 5 'form' attribute as detailed here (along with a poly-fill for older browsers if needed). The form needs an id attribute and then the button outside it needs a form attribute with the value set to the id of the form. Then the form elements inside the dialog behave as expected. Thanks for the response though!

edited Oct 7, 2016 at 5:32

theUtherSide

3,5064 gold badges38 silver badges38 bronze badges

answered Mar 28, 2016 at 16:23

D Durham

1,3413 gold badges20 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Roy Hadad · Accepted Answer · 2021-09-24 21:22:21Z

7

The material-ui Dialog component inherits from the material-ui Modal component, which means it accepts the prop "disablePortal" - which is false by default.

from the docs: "Disable the portal behavior. The children stay within it's parent DOM hierarchy." https://material-ui.com/api/modal/#props

by default, the dialog is rendered as a child of your root html node, to have it render inside the <form> tag, you need to disable the portal behavior.

<form onSubmit={someFunction}>
  <Dialog disablePortal>
    <DialogTitle>
      title!
    </DialogTitle>
    <DialogContent>
      form fields go here
    </DialogContent>
    <DialogActions>
        <button type="submit">submit!</button>
    </DialogActions>
  </Dialog>
</form>

edited Sep 24, 2021 at 21:22

answered Dec 15, 2020 at 15:56

Roy Hadad

1182 silver badges6 bronze badges

Comments

siamhunter jet · Accepted Answer · 2022-11-18 07:56:50Z

0

<form onSubmit={someFunction}>
  <Dialog disablePortal>
    <DialogTitle>
      title!
    </DialogTitle>
    <DialogContent>
      form fields go here
    </DialogContent>
    <DialogActions>
        <button type="submit">submit!</button>
    </DialogActions>
  </Dialog>
</form>

answered Nov 18, 2022 at 7:56

siamhunter jet

1

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

natac · Accepted Answer · 2016-03-28 15:36:04Z

-2

Hey yeah I have this combo working... well I am using the Dialog component from react-toolbox which is very similar to Material-ui but they use Css-modules for styles instead of inline.

So the function you provide to the onSubmit attribute of the form element is going to be the handleSubmit function from redux-form. If you want to do anything such as dispatch actions and store the data then you will need to pass in an onSubmit function to the handleSubmit function. What happens is your onSubmit function is called with the values(object with properties of the values of your form) and the dispatch function from the redux store. You can see the project I have which has the setup you are looking for.

answered Mar 28, 2016 at 15:36

natac

3422 silver badges9 bronze badges

1 Comment

NSN Over a year ago

The question is about material UI, and not about react-toolbox

JFAP · Accepted Answer · 2016-08-15 08:09:27Z

-3

Instead of onSubmit={someFunction}, make it

 <Dialog>
  <form onSubmit={this.someFunction}>
    ...
  </form>
</Dialog>

answered Aug 15, 2016 at 8:09

JFAP

3,7371 gold badge27 silver badges25 bronze badges

1 Comment

NSN Over a year ago

The question is specifically for reverse scenario.

Collectives™ on Stack Overflow

Form in Material UI Dialog using React

5 Answers 5

Comments

Comments

1 Comment

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related