Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Prevent context menu close on click #8

Closed
abradburymf opened this issue Sep 12, 2018 · 5 comments · Fixed by #9
Assignees
Labels

Comments

@abradburymf
Copy link

@abradburymf abradburymf commented Sep 12, 2018

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

This comment has been minimized.

Copy link
Owner

@rawilk rawilk commented Sep 12, 2018

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

@rawilk rawilk added the enhancement label Sep 12, 2018
@rawilk rawilk self-assigned this Sep 12, 2018
@rawilk rawilk referenced this issue Sep 12, 2018
@rawilk rawilk closed this in #9 Sep 12, 2018
@robjbrain

This comment has been minimized.

Copy link

@robjbrain robjbrain commented Oct 16, 2018

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

This comment has been minimized.

Copy link

@robjbrain robjbrain commented Oct 16, 2018

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

This comment has been minimized.

Copy link
Owner

@rawilk rawilk commented Oct 16, 2018

@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

This comment has been minimized.

Copy link
Owner

@rawilk rawilk commented Oct 23, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants
You can’t perform that action at this time.