Prevent context menu close on click

[abradburymf]

Add a prop similar to CloseOnScroll that allows the customization of whether the context menu closes on click

<template>
    <div class="v-context"
         v-show="show"
         :style="style"
         tabindex="-1"
         @blur="close"
         @click="tryCloseOnClick"
         @contextmenu.capture.prevent
    >
        <slot :data="data"></slot>
    </div>
</template>

<script>
    export default {
        props: {
            closeOnClick: {
                type: Boolean,
                default: true
            },
            closeOnScroll: {
                type: Boolean,
                default: true
            }
        },

        computed: {
...

        methods: {
            /**
             * Add scroll event listener to close context menu.
             */
            addScrollEventListener () {
                window.addEventListener('scroll', this.close);
            },

            /**
             * Close the context menu.
             */
            close () {
                this.top = null;
                this.left = null;
                this.data = null;
                this.show = false;
            },

            tryCloseOnClick () {
                if (this.closeOnClick) {
                    this.close();
                }
            },

[rawilk]

Thanks for the suggestion, I will add this feature when I get a chance to.

[robjbrain]

If you have an input field within the context menu then the menu will still be closed when focusing on the input.

It might be better to use a directive such as clickaway (https://github.com/simplesmiler/vue-clickaway) rather than simply using the blur event?

[robjbrain]

I don't know if @rawilk will be interested in implementing this, but to anyone else finding this issue you can easily add vue-clickaway support yourself by extending the base component like so:

<template>
    <div class="v-context"
         v-show="show"
         :style="style"
         tabindex="-1"
         @click="onClick"
         @contextmenu.capture.prevent
         v-on-clickaway="close"
    >
        <slot :data="data"></slot>
    </div>
</template>

<script>
    import { VueContext } from 'vue-context';
    import { mixin as clickaway } from 'vue-clickaway';
    export default {
        mixins: [ clickaway ],
        extends: VueContext,
    };
</script>

All i've done here is extend the base component, import vue-clickaway and overwrite the template to remove @blur="close" and replace it with v-on-clickaway="close"

Now if you have an input field (or any content) within the context menu then focusing on it won't close the menu but clicking outside of the menu will do so

[rawilk]

@robjbrain I think the directive would be useful for the menu instead of using blur to close it. I will probably look more into this later on this week sometime.

[rawilk]

v-on-clickaway has been implemented in version 3.3.1 now. See PR #12