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

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

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

@Twix03

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.

@MisRob

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

@Divyansh044

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

@MisRob

@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.

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.

@NightFury742

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

@MisRob

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

@NightFury742

No problem, thanks for letting us know @NightFury742

@MisRob

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

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 ?

That seems correct, yes.

I have assigned you to the issue.

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.

Closed by #4482

Navigation Menu

Repository navigation

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

Summary

Category

7 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

Summary

Category

Activity

Twix03 commented on Dec 19, 2023

MisRob commented on Jan 9, 2024

Divyansh044 commented on Jan 14, 2024

MisRob commented on Jan 15, 2024

7 remaining items

NightFury742 commented on Feb 15, 2024

rtibbles commented on Feb 15, 2024

MisRob commented on Mar 15, 2024

NightFury742 commented on Mar 16, 2024

MisRob commented on Mar 18, 2024

Abhishekzod007 commented on Mar 21, 2024

Abhishekzod007 commented on Mar 21, 2024

rtibbles commented on Mar 21, 2024

rtibbles commented on Mar 21, 2024

Abhishekzod007 commented on Mar 21, 2024

MisRob commented on Jul 10, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions