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

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

Closed
maciz84 opened this issue Jan 9, 2020 · 10 comments · Fixed by skyYaga/skdvin-webapp#18
Assignees
Labels
C: VCalendar VCalendar T: bug Functionality that does not work as intended/expected
Milestone

Comments

@maciz84
Copy link

maciz84 commented Jan 9, 2020

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

@ghost ghost added the S: triage label Jan 9, 2020
@jacekkarczmarczyk
Copy link
Member

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

@maciz84
Copy link
Author

maciz84 commented Jan 12, 2020

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

@maciz84
Copy link
Author

maciz84 commented Jan 13, 2020

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?

@jacekkarczmarczyk
Copy link
Member

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

@maciz84
Copy link
Author

maciz84 commented Jan 13, 2020

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

@maciz84
Copy link
Author

maciz84 commented Jan 13, 2020

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.

@jacekkarczmarczyk
Copy link
Member

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

@maciz84
Copy link
Author

maciz84 commented Jan 13, 2020

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.

@maciz84
Copy link
Author

maciz84 commented Jan 13, 2020

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

@johnleider johnleider self-assigned this Jan 14, 2020
@johnleider johnleider added C: VCalendar VCalendar T: bug Functionality that does not work as intended/expected and removed S: triage labels Jan 14, 2020
@johnleider johnleider added this to the v2.2.x milestone Jan 14, 2020
@maciz84
Copy link
Author

maciz84 commented Jan 14, 2020

Thanks guys you are the best

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
C: VCalendar VCalendar T: bug Functionality that does not work as intended/expected
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants