5

So, I'm trying to use Semantic UI modal component with the form component.

My problem is that if I use these two together the UI becomes bad.

I created a sandbox about my current situation: https://codesandbox.io/s/2n1pj96ry

As you can see now the submit button does not attached to the form. If I move the Form component directly inside the Modal component, like this: <Modal...> <Form> ... </Form> </Modal> the submit will attached to the form, but the UI breakes down.

I tried to add different classes to these components (like ui modal to the Form component, but it doesnt worked well).

Do you have any suggetsion?

Thanks for you help!

  • What a `type="submit"` button does is call the `onSubmit` handler attached to the form when it is clicked. You don't *have* to submit your form that way, you could also call the handler straight from the button with `onClick={this.submitHandler}` for example. That way, your button doesn't necessarily have to be a child of the form. – Thomas Hennes Feb 08 '19 at 13:08
  • @Jaxx Thanks, I didn't thought about this. Basically I would like to solve this problem without calling the form submit method manually, but if I could not solve this problem with the "normal" way I will use your solution. –  Feb 08 '19 at 16:42
  • Unless you were planning to submit the form through 'traditional' HTML (meaning through a form action and a full page refresh), you will have to call your form handler manually anyway (or more accurately, define your own handler). – Thomas Hennes Feb 08 '19 at 18:43
  • @Jaxx I would like to accept your suggestion, but I cant accept it. I think you should write your suggestion as a answer instead of comment. –  Feb 18 '19 at 12:31

1 Answers1

16

You can use the as prop on the Modal to make it a form element.

<Modal 
   as={Form} 
   onSubmit={e => handleSubmit(e)}
   open={true}
   size="tiny">

Any button with the submit type in your modal will fire the onSubmit handler. I find this to be a nice way to opt-in to required fields and easy validation by the browser on form elements.

Be sure to pass the event to your submit handler and use the preventDefault method to avoid the browser from automatically trying to post your form.

Forked your sandbox and made a working example. The modal is changed to a <form> element, the Input has the required property and the browser will demand the element is valid before firing the onSubmit handler. The default form action is prevented, and you can handle as desired with whatever.

thumbtackthief
  • 6,093
  • 10
  • 41
  • 87
Ian
  • 313
  • 2
  • 6