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

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

Open
hanucito opened this issue Aug 27, 2019 · 2 comments

Comments

@hanucito
Copy link

hanucito commented Aug 27, 2019

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
Copy link

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
Copy link

TakCastel commented Jun 24, 2020

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

Found this solution on another package : here

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants