search

microsoft / fluentui-blazor

Microsoft Fluent UI Blazor components library. For use with ASP.NET Core Blazor applications
https://www.fluentui-blazor.net
MIT License
3.76k stars 362 forks source link

fix: Long page scrolls to center in DialogService.Show #2500

Closed mattfrear closed 2 months ago

mattfrear commented 2 months ago

🐛 Bug Report

I have a long page with a lot of text on it. At the top of the page is a button which brings up a dialog via _dialogService.ShowConfirmationAsync($"Are you sure?");. When the button is pressed, the page vertically scrolls to the center before showing the dialog, causing the user to "lose their place" on the page.

💻 Repro or Code Sample

Blazor WASM 8 app.

@page "/"
@inject IDialogService _dialogService
<p>Lorem ipsum blah blah<FluentButton Appearance="@Appearance.Accent" OnClick="(() => Resend())">Resend</FluentButton></p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>

@code {

    private async Task Resend()
    {
        var dialog = await _dialogService.ShowConfirmationAsync($"Are you sure you want to resend?");
        var result = await dialog.Result;
    }
}

🤔 Expected Behavior

Dialog should popup in current scrollbar position and not scroll.

😯 Current Behavior

Page scrolls to middle while Dialog is being shown.

Screen recording: https://github.com/user-attachments/assets/73a307c8-a83b-4f43-a9be-add1debb1c7e

💁 Possible Solution

This doesn't happen if I use <FluentDialog> on the page instead, so that's a possible workaround. But it's not as convenient as using DialogService.

🔦 Context

My long page has dozens of buttons on it, so scrolling to the middle each time is poor UX, as the user loses their place on the page, especially if they click "No".

🌍 Your Environment

dvoituron commented 2 months ago

I tried to reproduce, without success, your issue by replacing the Home page (Home.razor) of our Demo site with your code.

Can you try, adding our recommended CSS for the body tag? See https://www.fluentui-blazor.net/DesignTheme Or can you verify if the problem is not linked to another CSS configuration?

body {
    margin: 0;
    padding: 0;
    height: 100vh;
    font-family: var(--body-font);
    font-size:   var(--type-ramp-base-font-size);
    line-height: var(--type-ramp-base-line-height);
    font-weight: var(--font-weight);
    color:       var(--neutral-foreground-rest);
    background:  var(--neutral-fill-layer-rest);
}

peek_1

Or can you give us a repo with the sample?

mattfrear commented 2 months ago

Hi @dvoituron. Thank you for trying to reproduce.

When I tried to create a sample which reproduces the bug, like you, I couldn't, as it worked fine.

I finally figured out the problem, and it was my fault: My bad MainLayout.razor:

@inherits LayoutComponentBase
<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>

    <main>
        <div class="top-row px-4 auth">
            <LoginDisplay />
        </div>

        <article class="content px-4">
            @Body
        </article>
    </main>
    <FluentToastProvider />
    <FluentDialogProvider />
    <FluentTooltipProvider />
    <FluentMessageBarProvider />
</div>

working MainLayout.razor - note the div tag at the end.

@inherits LayoutComponentBase
<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>

    <main>
        <div class="top-row px-4 auth">
            <LoginDisplay />
        </div>

        <article class="content px-4">
            @Body
        </article>
    </main>
</div>
<FluentToastProvider />
<FluentDialogProvider />
<FluentTooltipProvider />
<FluentMessageBarProvider />