Bootstrap modal disappears on click inside the modal

Question

I have a page with two Bootstrap (v3.3.6) modals, but only one open at a time. They both encapsulate forms with simple text fields and selects. One of them opens just fine, and closes as expected. The other opens okay, but closes as soon as I click inside the modal (i.e. I click on a text input field). It stays open if I tab to a text field and type into it, though. I've checked the following:

• Not a conflict due to multiple "modal" classes on the page. I removed the first modal, and the second one still shows this behavior.
• Not a conflict between jQuery-UI and Bootstrap JS. Removed jQuery-UI and still showed this behavior.
• Does not appear to be a z-index issue. The backdrop is at 1040, and the modal is at 1050. I've also manually removed the backdrop via Chrome dev tools, but the modal dialog still closes when I click inside of it. (I suspect it still might be due to some sort of weird z-index conflict...)
• Does not appear to be a conflict with Bootstrap CSS. I've removed the list-group and list-group-item classes, and still have the issue.
• I've set data-backdrop="static", but got same behavior.
• The modal inputs are editable, if I tab into a form field.

I've recreated the issue in a stripped down jsfiddle. Click the button on the right of the blue bar, and you'll see what I mean. Sorry I have not included all the code in the question, since it is all there in the fiddle...if it is helpful here, I can as well.

I'm using React 0.14.7, not sure if that is the issue (the problematic modal object is deeply nested in React components, as in the fiddle).

Any ideas?

Answer 1

I don't know whether your using jquery etc for other things in your application but otherwise think about a switch to react-bootstrap. This way you can cut down on you js bundle a lot. I've just started using it and seems pretty solid so far.