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

How can we close the popper on something like a scroll event? #43

Open
fergusmeiklejohn opened this issue Nov 8, 2021 · 3 comments
Open

Comments

@fergusmeiklejohn
Copy link

This is a great library, thanks for building it! I'm wondering how we can close the popper without implementing full manual control?

Problem: I need to close the popper on scroll, but want to retain the default open/close functionality of the component, so I don't want to eject to full manual control.

@valgeirb
Copy link
Owner

valgeirb commented Nov 8, 2021

Thanks for this, I see your problem. Maybe it's possible to keep using the internal functionality while using v-model or the .sync modifier - that way you would keep all the default functionality while still being able to manually control the Popper.

I'll take a look at this.

@fergusmeiklejohn
Copy link
Author

Thanks! Yes the beauty of the component is that it implements all that default open/close functionality, which we wouldn't want to lose to be able to get some manual control.

@srr3
Copy link

srr3 commented Dec 8, 2021

i got the same issue (close popper manually without full open/close control), and this is my workaround:

<Popper :show="showPopper"> ... </Popper>

const hidePopper = () => { showPopper.value = false; nextTick(() => { showPopper.value = null; }); };

https://codesandbox.io/s/vue3-popper-manually-close-workaround-umrcf

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