search

nathanreyes / v-calendar

An elegant calendar and datepicker plugin for Vue.
https://vcalendar.io
MIT License
4.32k stars 841 forks source link

Use Teleport to ensure popover works anywhere #1397

Closed JohnCampionJr closed 8 months ago

JohnCampionJr commented 8 months ago

I am using v-calendar inside modal dialogs and other places with overflow-hidden. As such, I need to get the popover out of there, but the fixed strategy isn't working too well.

I found that simply adding a <Teleport to="body"> to the Popover.vue component solved the problem quite readily.

I made myself a temporary package as I needed to get it working.

https://github.com/jcamp-code/v-calendar/blob/teleport/src/components/Popover/Popover.vue

If you'll take a PR, I will submit this.

It does break some tests since things aren't where they were expected to be.

I could also add this behind a property if you'd like.

Update: I can't figure out a way to make this work with a property. I tried the disabled prop on Teleport but Nuxt really doesn't seem to like that.