Modal closes when selecting a field.

[sahil839]

Current behavior - Selecting a field or text in the modal closes it if mouse is dragged outside the modal.

Example from zulip project-

Can be reproduced while selecting some text in the demo modal in documentation as well.

Expected behavior - Modal should not closed if mouse ends up outside the modal while selecting something.

[sahil839]

One possible solution could be to add the below check before closing the modal on clicking the overlay

if (document.getSelection().type === "Range") {
    return;
}

[Ethan-Hill]

Same thing here, this seems like quite a big issue to have if someone is just interacting with the content.

[mattiusclay]

Same issue here, very simple install, clicking on certain areas of the "modal__container", close the modal down for me. It's triggering the overlay close even though I'm clicking within the modal, surely that's not right?

[JSFTI]

I "solved" this by manually adding mousedown event listener to the overlay element.

onmousedown="event.target.classList.contains('modal-overlay') && MicroModal.close("MODAL-ID-HERE")"

The close function will only be triggered if current mousedown event target is the overlay element.
That modal-overlay is the class name for my modal overlay.

[heyflo]

👋 Hello here! One simple fix would be to have the overlay on its own. At the moment the content of the modal modal__container is nested inside the overlay which is listening for interaction(s) to close the modal. I tried it and it's working perfectly (using it myself). You just need to adjust your css to have the modal__container positioned correctly 😁 .