[1.0.23] Modal - Dragging outside the modal closes it

[TimBroddin]

Quick summary

When dragging outside a modal (probably any dialog) it gets closed. The click event triggers on mouse up, and has the clientX & clientY from where the mouse was released.

Workaround/fix

I was able to fix this by adding this code inside dialogable.js:

 if (this.options().clickOutside) {
            let isInteractingInside = false;

            // Track mousedown events inside the dialog
            this.el.addEventListener('mousedown', e => {
                if (e.target !== this.el) {
                    isInteractingInside = true;
                }
            });

            // Reset the tracking on mouseup
            window.addEventListener('mouseup', () => {
                setTimeout(() => {
                    isInteractingInside = false;
                }, 0);
            });

            // Clicking outside the dialog should close it...
            this.el.addEventListener('click', e => {
                // Clicking the ::backdrop pseudo-element is treated the same as clicking the <dialog> element itself
                // Therefore, we can dissregard clicks on any element other than the <dialog> element itself...
                if (e.target !== this.el) return

                // Don't close if the interaction started inside the modal
                if (isInteractingInside) return

                // Again, because we can't listen for clicks on ::backdrop, we have to test for intersection
                // between the click and the visible parts of the dialog elements...
                if (clickHappenedOutside(this.el, e)) {
                    this.hide()

                    e.preventDefault(); e.stopPropagation()
                }
            })
        }