Vuetify: [Bug Report] Calendar Overlap and More getting confused when calendar is in v-tab and switching tabs

Created on 9 Jan 2020  路  10Comments  路  Source: vuetifyjs/vuetify

Environment

Vuetify Version: 2.2.3
Vue Version: 2.6.10
Browsers: Chrome 79.0.3945.88
OS: Windows 10

Steps to reproduce

Click the calendar tab then switch to another and go back to calendar tab, you will see that the event-overlap-mode gets messed up in that the overlap events and more functionality are not as they were originally.

If you click on an event it will reset itself to its original state.

Expected Behavior

It should respect the original event-overlap as seen on first load

Actual Behavior

When switching tab and returning to the calendar tab you will notice that the event-overlap does not look the same. In the sense that most of the overlaps are gone and it just adds 'more' for most of them. If you click on an event that is visible it will reset itself to the desired/original state

Reproduction Link

https://codepen.io/maciz84/pen/rNadjLj?editable=true&editors=101

VCalendar bug

All 10 comments

Please update your repro so that it doesn't use random numbers (or make the rnd method seedable) as it's hard to debug

Oh ok I literally just used your example on the website and put it inside a v-tab component, so I assumed you guys would be familiar with the example. Anyways, I will re-create with hard coded values

Hi @jacekkarczmarczyk
I hope you are well? I have updated the repro as per your request. Please let me know if this is good enough?

Better, thanks, would be even better if you removed all unnecessary code:

Bug:
https://codepen.io/jkarczm/pen/mdyKObV?editors=1010

No bug (removed v-model from calendar)
https://codepen.io/jkarczm/pen/MWYXbYX?editors=1010

No bug (with v-model, moved tab items to v-tabs):
https://codepen.io/jkarczm/pen/JjoZbdq?editors=1010

No bug (applied height to v-tab-item)
https://codepen.io/jkarczm/pen/rNaKWOq?editors=1010

Hi @jacekkarczmarczyk
Thanks for that, ok I was being lazy as I couldn't obviously use my actual code for the example so was talking a short cut. I do apologise for this and really appreciate you looking into this for me you have been brilliant as always.

I will go back and fix my code as I obviously have some code that is interferring with it. Shouldn't be difficult for me to find the issue. Thank you so much again you are a legend

Ok I have tried all kinds of combinations with and without certain props and as you said in your summary that my particular set up is a bug. If I removed all the other props other than :events it works.

To be clear - by providing the working examples i was not saying that it's a bug in your setup, they were more like a workarounds. It looks for me as our bug, not sure though which component is responsible for this - v-tabs or v-calendar or v-window

Ok I understand what you mean now. Please let me know if there is anything else I need to do or test? I will try some more scenarios to see if we can identify the culprit and if so will update this issue. If you find it before me please could you let me know...only if you have time of course.

This is a totally hacky test. But I believe the issue could be with v-tab or v-window as when I use a simple v-if with divs as the body it seems to be ok.

https://codepen.io/maciz84/pen/vYErmyL?editors=1010

Thanks guys you are the best

Was this page helpful?
0 / 5 - 0 ratings