ScrollToTop doesn't work in dialogs

[danielchalmers]

Bug type

Component

Component name

MudScrollToTop

What happened?

Embedding a MudScrollToTop in a MudDialog doesn't do anything.

Expected behavior

A scroll-to-top fab appears when you scroll down inside a MudDialog.

Reproduction link

https://github.com/danielchalmers/MudBlazorAutoGrow

Reproduction steps

1. Clone repo or use snippet below
2. Open nav bar and click "Scroll To Top in Dialog"
3. Try scrolling and see it works
4. Now click "scroll to top dialog" to open dialog
5. Scroll to end and it won't appear ...

Snippet that demonstrates it:

@page "/opensdialog"
@inject IDialogService DialogService

<MudScrollToTop>
    <MudFab Color="Color.Tertiary" Icon="@Icons.Material.Filled.ArrowCircleUp" />
</MudScrollToTop>

<MudButton OnClick="() => visible = true"> scroll to top dialog</MudButton>

<MudTextField T="string" Lines="99" />

<MudDialog DefaultFocus="DefaultFocus.Element" @bind-IsVisible="visible">
    <DialogContent>
        <MudScrollToTop>
            <MudFab Color="Color.Tertiary" StartIcon="@Icons.Material.Filled.ArrowCircleUp" />
        </MudScrollToTop>

        <MudTextField T="string" Lines="99" />
    </DialogContent>
</MudDialog>

@code {
    private bool visible;
}

Relevant log output

No response

Version (bug)

6.11.1

Version (working)

No response

What browsers are you seeing the problem on?

Microsoft Edge

On what operating system are you experiencing the issue?

Windows

Pull Request

• [ ] I would like to do a Pull Request

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[ScarletKuro]

Have you tried by adding a selector in your dialog content and then setting the selector to MudScrollToTop? When selector is null it will use the root node.

[danielchalmers]

Have you tried by adding a selector in your dialog content and then setting the selector to MudScrollToTop? When selector is null it will use the root node.

@ScarletKuro

With this code:

<MudDialog>
    <DialogContent>
        <MudScrollToTop Selector=".mud-dialog">
            <MudFab Color="Color.Tertiary" StartIcon="@Icons.Material.Filled.ArrowCircleUp" />
        </MudScrollToTop>

        <MudTextField T="string" Lines="99" />
    </DialogContent>
</MudDialog>

I see this:

https://github.com/MudBlazor/MudBlazor/assets/7112040/c6253b4a-73f9-44bc-8b61-7afa7ac6b1b0

And the fab doesn't show at all with .mud-dialog-content instead (or another element inside DialogContent).

---

I also find ScrollManager.ScrollToTopAsync doesn't work for elements inside dialogs, but ScrollManager.ScrollIntoViewAsync does. I'm using this function instead:

window.scrollToElementInsideAnother = (ancestorSelector, descendantSelector) => {
    document.querySelector(ancestorSelector).scrollTop = document.querySelector(descendantSelector).offsetTop;
}

Maybe that would be useful in a new overload method?