Geek Answers Handbook

React + Semantic-UI: using forms inside the MODAL user interface

In the normal old semantic user interface WITHOUT REACT, I was able to create a form inside the module without any problems.

With the version of Semantic-UI + React, I can display the form inside the modal, but it does not work as I would expect.

For example, after the appearance of modal representations and forms inside a modal display. If I start typing in the input field, I would get this error:

Error: Invariant Violation: findComponentRoot(..., .1.1.1.0.4.0.0.1): Unable to find element. This probably means the DOM was unexpectedly mutated (eg, 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 because of this error, the other reaction code that I use for input does not work as expected.

This is the simplest 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 component above, I made sure to run it:

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

As mentioned above. It displays a penalty, but it does not work normally due to an invariant violation.

How do I get around this and make it work?

+6
source share
6 answers

You want to initialize the modality in componentDidMount using the detachable = false option.

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

This will prevent the modal from moving inside the global dimmer object, and the DOM will still be owned and managed by React. Other options are described here .

I created a JSFiddle example for testing.

+10
source

Okay ... I wish I could think about this sooner ....

I decided to analyze the DOM and directly manipulate the DOM to solve it.

I tried to find an even more “elegant” low-resolution solution, but it just didn't work. I tried Material-UI modal to integrate with Semantic-UI forms, but found that it does not scroll if the contents of the modal file are longer than the form, etc ...

I also tried to use the semantic interface API (available settings, etc.), but they all have some kind of negative side effects.

So here is what I did to find a solution. I looked at the HTML code generated when the MODAL was displayed, and looked at its position in the DOM.

As it turned out, when dimmer is active, Semantic-UI displays a div with this class for dimmer

 ui dimmer modals page transition visible active

I found that this div is a brother and not a child of another div with class

 ui fluid container pushable

which contains all my other content.

So I did this every time I run my modal, I immediately call the code to make the child of this container modal for my other content ... Thus, my modal is not covered by a dimmer.

 showModal: function() { $('.ui.modal.editform').modal('show'); //$('.ui.dimmer.modals').dimmer('hide'); //$('.ui.dimmer.modals').after('.pusher'); // $('.ui.dimmer.modals').appendTo('#render-target'); $('.ui.dimmer.modals').appendTo('.ui.fluid.container.pushable'); }

To summarize: 1.) With my experience of displaying a form inside a modal using Semantic-UI with React, if you do not set the UI MODAL property to be separated from the semantic UI, these are errors with Invariant Violation, etc. The solution is to set detachable to false.

2.) After that, you may encounter the problem of dimmer modal coverage of the modal and shape and, therefore, it not only looks bad, but also can not click on the input fields, etc. .... The solution for this, at least in my case, it was to manipulate dom with jQuery and fix it regardless of what the Semantic-UI forgot to do automatically.

I hope this helps someone in the future ... stuck on this for 3 days ....

I don't know if this is the best solution .... but it worked. Let me know if you have a better solution ...

+1
source

Good ... I found an even better answer.

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

Thus, modality and form in modal mode are no longer covered by a dimmer.

Now the problem (at least in my case) was that the dimmer covered only a certain part of the window, and not the ENTIRE window, which should do. In this case, it didn’t matter if you tried to set the css height to 100% ... since it is probably already 100%, but the parent container only fits to this point and therefore to the dimmer.

So this is the best solution I have found.

I found that if you declare modal higher in the hierarchy, in my case I declared it in the top container in front of the target container.

This is the target container:

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

And this should respond to the visualization of this container:

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

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

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

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

By doing this, the dimmer stands behind the modal and formal, but it also covers the entire window in its entirety and dynamically. Therefore, if you have a long table with a large number of entries, and the entire document is very long, the dimmer will still cover it completely, without the need to make additional manual settings.

+1
source

Set removable: false is not a good idea in my experience, because modal ('show') usually also creates Himmer on your page, it will encounter the z-index problem.

I am creating a semantic-modal component response for this problem, use this so that you can freely use the semantic modal in your response project.

0
source

Use context in modal settings. It worked for me.

-2
source

More articles:


All Articles