preston preston - 4 months ago 90
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(..., . 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({

return (
<div className="ui modal editform">
<form className="ui form">
<div className="field">
<input name="name" type="text" placeholder="Name">

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


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?


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.