React + Semantic-UI: Using Forms inside UI MODAL

Question

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?

Answer 1

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.

Answer 2

Ok...I found an even better answer.

The first answer I gave above was to move the dimmer to the same parent as the modal when that modal can be in any container that is LOWER in the hierarchy.

By doing this, the modal and the form in the modal are no longer covered by the dimmer.

The problem now (atleast in my case) was that the dimmer was only covering a certain portion of the window and not the ENTIRE window which is what it should be doing. In this case, it didn't matter if you tried to set the css height to 100%...as it probably is already 100% but the parent container only goes up to that point and therefore the dimmer as well.

So this is the better solution I have found.

I have found that if you declare the modal higher in the hierarchy, in my case I declared it at the topmost container BEFORE the target container.

This is the target container:

<div id="render-target"></div>

And this is to tell react to render to that container:

React.render(<App />, document.getElementById("render-target"));

The topmost div container inside is where I declared the UI MODAL with the setting detachable:false...

Now when I trigger the UI MODAL to display, I then use jQuery to move the modal to a even higher div container, which in this case is the target container:

$('.ui.modal.editform').appendTo('#render-target');

By doing this, the dimmer is behind the modal and form but it also covers the whole window entirely and in a dynamic way. Therefore if you have a long table with a lot of entries and the whole document is very long, the dimmer will still cover it in its entirety without you have to make any more manual adjustments.

Answer 3

The updated solution is to use semantic-ui-react:

https://github.com/Semantic-Org/Semantic-UI-React

http://react.semantic-ui.com/modules/modal