Event is fired on the same click that triggers the render of the component that uses the directive.

[hanucito]

I have a sidebar panel, that gets rendered when a button is clicked in a div (v-if).
When a user clicks outside this panel, the panel should close itself.

This is ok, but, the v-outside-click is being triggered along the button click that allows the panel to be rendered in the first place. The result is that the panel is not rendered at all, or is hidden in the same instant that is enabled.

I tried an alternative to this package "v-on-click-outside" and it does not have this issue, but it will be nice to have this corrected it here.

[hoanglamhuynh]

I had the same issue and it was solved by adding a state called "isPreventingClickOutsideProcess", and turns it to true for 100 miliseconds

medthodShow () {
      this.isPreventingClickOutsideProcess = true
      this.isShowing = true
      setTimeout(() => {
        this.isPreventingClickOutsideProcess = false
      }, 100)
}

methodHide () {
     if (!this.isPreventingClickOutsideProcess) {
          this.isShowing = false
     }
}

[TakCastel]

Try adding @click.stop to the event fired by the button opening the pannel.

Found this solution on another package : here