Bootstrap: Modal won't close when you click outside if modal-dialog is inside <form>

[luckyruby]

Description
Modal won't close if you click outside to the left & right of the modal. It will however if you click above and below it.

Test Case
https://codepen.io/luckyruby/pen/xaxBNV

Tested on Mac OS 10.13.6 on Safari 11.1.2, Firefox 61.0.2, and Chrome 68.0.3440.106.

[MartijnCuppens]

Why don't just add the form inside the .modal-content?

[ArunHub]

yes it works after adding

tag inside div.modal-content

[luckyruby]

@MartijnCuppens Yea, that's ultimately what I did to get it working. It seems odd that the form placement would mess up the modal in that way. I don't recall seeing the issue in v3.

[MartijnCuppens]

@luckyruby, You did something that you weren't supposed to be doing (placing a form as a child of the .modal), it worked in v3, but due some refactoring in v4 this now gives some issues.

Modals in v4 use pointer-events which allows you to click trough elements, if you place an element like a form in the .modal, you click on the form and not on the modal itself (where a eventListener is attached to to close the modal). Another option was to add pointer-events: none; to the form, but I wouldn't recommend that because Bootstrap 4 always assumes that .modal-dialog is a child of the .modal and this might cause some troubles in the future.

[Johann-S]

Your modal content should be in .modal-content as explained by @MartijnCuppens

[luckyruby]

@MartijnCuppens Appreciate the explanation. Thanks!