How to hide all popovers on document click - except the one clicked

Posted 1 month ago by MartinZeltin

I have a Calendar component with days. When you click on a day, it shows it's popover. I am trying to make it so that if you click anywhere in the document it hides all popovers. But it should not hide the one that I just opened.

I added an event listener for document click but it fires after the Day component's @click event. Which means it shows the current day's popover and then immediately hides all popovers. But it should first hide all popovers and only then show the Day's popover.

HTML

<div id="app">
    <calendar-month-view>
        <day></day>
        <day></day>
        <day></day>
    </calendar-month-view>
</div>

My Day component

export default {

    template: `
        <div @click="isVisiblePopover = !isVisiblePopover">
            <popover v-show="isVisiblePopover" />
        </div>
    `,

    components: {
        Popover
    },

    data() {
        return {
            isVisiblePopover: false
        }
    },

    mounted() {
        $(document).click(event => {
            EventBus.$emit('popover-opened')
        });

        EventBus.$on('popover-opened', () => {
            this.isVisiblePopover = false
        });
    }
};

Please sign in or create an account to participate in this conversation.

Reply to

Use Markdown with GitHub-flavored code blocks.