Use activated and deactivated lifecycle hooks to handle HTML scroll changes for FullscreenModal component

[rtibbles]

Summary

Because of a flaw in the Vuetify dialog implementation, when opening a full screen modal, you can get double scroll bars occurring, we currently handle this by disabling scrolling on HTML on mount, but this does not catch all uses cases, particularly when the full screen modal is used in a route and kept alive.

See here for more context: #1962 (comment)

Category

Select one: BUG

[Twix03]

I would like to take this issue, can you please help me with how to get started.

[MisRob]

Hi @Twix03, thank you for volunteering! I'm sorry for delayed response, the whole team had holidays recently. To get started, please follow Studio Contributing Guidelines, where you will find how to run Studio locally. After your Studio is running, you can reproduce the issue described here. Let us know if you still wish to be assigned.

[Divyansh044]

@MisRob Please assign this issue to me I can work on this

[MisRob]

Hi @Divyansh044, thank you for volunteering. I'm assigning you.

[nick2432]

can i work on this?

[rtibbles]

Hi @nick2432, you're currently assigned to three issues, so let's see those finished up before we assign any more!

[NightFury742]

Hey @rtibbles I would be delighted to work on this issue. Can you please assign it to me

[nick2432]

Hi @nick2432, you're currently assigned to three issues, so let's see those finished up before we assign any more!

@rtibbles , yes, I noticed I have two assigned issues. Thank you for your attention, and I apologize for any inconvenience caused.

[MisRob]

No problem, @nick2432

[MisRob]

Thanks for volunteering, @NightFury742. I will assign you.

[NightFury742]

@MisRob @rtibbles I can't recreate this issue, can I get some more insights on this ? Also i'm really sorry for the delayed response, I was busy with some personal work.

[rtibbles]

At its root, we should be using the activated and deactivated lifecycle hooks to make the updates to HTML scroll changes, rather than created and destroyed hooks - it's possible that this issue may not be as prevalent now, if we are no longer keeping components alive, so that may be why you are having more difficulty seeing problematic behaviour in action.

[MisRob]

Hi @NightFury742, is this issue work in progress or should we unassign?

[NightFury742]

Really sorry @MisRob for taking so long. I'll unassign it.

[MisRob]

No problem, thanks for letting us know @NightFury742

[Abhishekzod007]

Hi @MisRob
I think I'll be taking up this issue now
I think an example of this would be the "Edit Channel" modal, please let me know if this is correct

[Abhishekzod007]

Wat I understood from the above conversation is that the mount and destroy based events are proving to be problematic and we should use activated and deactivated lifecycle hooks instead
So, if that's correct. would something like this :

    deavtivated() {
      this.hideHTMLScroll(false); // Ensure scroll is restored when the component is destroyed
    },
    activated(){
      this.hideHTMLScroll(true);
    },
    mounted() {
      this.$refs.dialog.initDetach();
    },

get the job done ?

[rtibbles]

That seems correct, yes.

[rtibbles]

I have assigned you to the issue.

[Abhishekzod007]

That seems correct, yes.

Thanks for affirming, I will draft a PR with the basic changes I mentioned above.
Then we can see if the issue is prevalent in any other scenarios as well.

[MisRob]

Closed by #4482