preston preston - 1 month ago 28
Javascript Question

React + Semantic-UI: Using Forms inside UI MODAL

In the plain old Semantic-UI WITHOUT React, I have been able to put a form inside a Modal without a problem at all.

With the Semantic-UI + React version, I am able to display the form inside the modal, but it doesn't work the way I would expect it to.

For example, after the modal shows and the form inside the modal also is displayed. If I start inputting in the input field, I would get this error displayed:

Error: Invariant Violation: findComponentRoot(..., .1.1.1.0.4.0.0.1): Unable to find element. This probably means the DOM was unexpectedly mutated (e.g., by the browser), usually due to forgetting a <tbody> when using tables, nesting tags like <form>, <p>, or <a>, or using non-SVG elements in an <svg> parent. Try inspecting the child nodes of the element with React ID ``.


And due to this error, the other react code that I use the input for do not work as expected.

This is the most simple version of the code that demonstrates the problem:

ConfirmEdit = React.createClass({

render(){
return (
<div className="ui modal editform">
<form className="ui form">
<div className="field">
<label>Name</label>
<input name="name" type="text" placeholder="Name">
</input>
</div>
</form>
</div>
);
}
});


Inside the component where i add the above the component I made sure to trigger it:

$('.ui.modal.editform').modal('show');


As mentioned above. It displays fine, but it doesn't work fine due to the Invariant Violation.

How do I work around this and make it work?

J3Y J3Y
Answer

You want to initialize the modal in componentDidMount with the option detachable = false.

$('.ui.modal').modal({detachable: false});

This will prevent the modal being moved inside a global dimmer object, and the DOM will still be owned and managed by React. Other options are documented here.

I created an example JSFiddle for you to test with.

Comments