How might we distinguish between click-outside and dragged-outside?

[topada]

👋 Hi there,
I’ve got a form with a couple of input fields and textareas inside a modal. The modal has the v-click-outside directive setup to close the modal. This behaviour is well accepted by our users. However, there is one problem: if the user tries to select the text inside a prefilled input field and overshoots the input field as well as the modal and the pointer stops outside the modal, the modal is consequently closed.

Is there an elegant way to check whether the Pointer Event was the result of a dragging event?

[topada]

I guess I've figured out a way to solve this problem, based on: Modal is closed when cursor is released outside the modal after Chrome update (angularjs and bootstrap-ui)

Stripped down, this is what I’ve got now — hope this might help others in the future :) Still happy for suggestions!

<template>
    <div class="modal">
            <div class="modal__mask">
                <div class="modal__wrapper">
                    <div v-click-outside="onClickOutside" class="modal__panel">
                        <div class="modal__container">
                            <slot />
                        </div>
                    </div>
                </div>
            </div>
    </div>
</template>
<script>
    export default {
        name: "Modal",
        data()
        {
            return {
                preventClickOutside: false,
            };
        },
        mounted()
        {
            window.addEventListener("keyup", this.onKeyUp);
            window.addEventListener("mousedown", this.onMouseDown);
        },
        beforeDestroy()
        {
            window.removeEventListener("keyup", this.onKeyUp);
            window.removeEventListener("mousedown", this.onMouseDown);
        },
        methods: {
            onClickOutside()
            {
                if (this.preventClickOutside)
                {
                    this.preventClickOutside = false;
                    return;
                }
                this.$emit("close");
            },
            onMouseDown(mouseEvent)
            {
                const modalMask = document.querySelector(".modal__mask");
                this.preventClickOutside = mouseEvent.target !== modalMask;
            },
        },
    };
</script>