CODEWITHSUNDEEP
reactjssemantic-ui-reactsemantic-ui-css
user6046794
user6046794

Reputation:

React Semantic-UI: Modal component with Form component? Is it possible?

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!

Upvotes: 5

Views: 4458

Answers (1)

Ian
Ian

Reputation: 323

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.

Upvotes: 17

Related Questions