Custom directives proceeds component render

Question

I am using a custom click-outside directive from this post:

Detect click outside element

This is my element:

<div class="datepicker panel panel-default" v-click-outside="close">

The custom directive:

module.exports = {
    bind(el, binding, vnode) {
        el.event = (event) => {
            // Check that click was outside the el and his children.
            if (!(el === event.target || el.contains(event.target))) {
                console.log('Clicked outside');

                // Call the method provided as the attribute value.
                vnode.context[binding.expression](event);
            }
        };

        document.body.addEventListener('click', el.event);
    },

    unbind(el) {
        document.body.removeEventListener('click', el.event);
    }
};

It works and to my knowledge the bind takes place on render of the element. Because I only want the click event to be registered when my datepicker is in view I wrapped it with a v-if.

The problem is that when I use a button to toggle the display of the v-if on the datepicker, the close method from the directive immediately fires.

It seems that the event within bind takes places before the element is even shown, therefore it closes immediately and nothing is shown at all.

This looks like pretty strange behavior singe the button is responsible for showing the datepicker and I would expect the bind to take place when the datepicker has rendered. Not at the same time or before.

Now it seems to take place even before the element has fully rendered. This causes my display button to cause a v-click-outside event.

What is causing this?

Edit:

Made a Jsfiddle to demonstrate this problem(open console):

https://jsfiddle.net/stephanv/qqjnngdz/2/

Answer 1

Well it sounds absolutely logical. Here's what happens:

1. You click on "show date picker", which is actually a button
2. show method is called, because on the button you have @click="show"

3. The the visible property is changed to true.

4. The directive is evaluated, because of the click event

5. The if-else gets in place, stating that el (div with a directive) is different than event.target (button)

6. The binding expression (hide) is called because of the if-else just before

7. hide function is called, visible property is set to false, therefore the component is hidden!

What you are missing here, compared to the samples, is that you open the datepicker from another target (button in your case). Which means by default that you ARE clicking outside of the element in order to display it.

You have two options - one is to check the current state of the datepicker - add another property (justOpened), set it to true inside show, and when you check if it's clicked outside or not, if the property is true, set it to false and return. This way you "skip" one event of that kind.

All of that is not needed if you can simply do this:

<button type="button" @click.stop="show">Show datepicker</button>

This .stop modifier will actually call stopImmediatePropagation() on the native click event, and therefore you directive won't be called at all when you click on this button. It works like a charm, but beware that if you open the datepicker and then click on the same button again, the datepicker will not be hidden (as it won't know that you've clicked outside)!

Hope that helps :)