Scroll not working after NavigationManager navigation #483

WillianGruber · 2020-01-08T22:38:22Z

Describe the bug
After navigation with NavigationManager.NavigateTo("/SomePage"); , when I click the Sidebar to go to another page, this Sidebar page does not scroll anymore.

(The SomaPage isn't long enough to require a scroll, will test if it is broken soon)

stsrki · 2020-01-09T08:19:27Z

I'm trying it in the demo app and for me it works. Although it feels strange that Sidebar scrolls along with the page, it still scrolls. Maybe that's what you were thinking?

WillianGruber · 2020-01-09T13:40:34Z

I'm sorry, I expressed myself bad. I mean the page that is loaded through a link in the sidebar does not scroll. I'll post the details here soon.

WillianGruber · 2020-02-04T16:18:48Z

OK, I can confirm the bug.

I have a page "page1" accessible from the sidebar.
This page1 has lots of content, so it scrolls down normally.
This page1 has a button that navigates to page2.
Clicking on it and after displaying page2, I click on the page1 link in sidebar.
The page1 is displayed, but the scrolls no longer works.

WillianGruber · 2020-02-04T16:25:11Z

I extended page2 so that it should scroll too. It does not. Probably something with navigation manager

WillianGruber · 2020-02-04T16:33:06Z

Also, there is a modal asking for a key in order to navigate to page2. If there is no modal, the scroll after it works normally. Maybe the modal disables scrolling and doesn't enables back? Maybe the ModalBackdrop is bugged?

WillianGruber · 2020-02-04T16:38:37Z

Removing ModalBackdrop doesn't fix it.
Displaying the modal and closing it, and then navigating with other button works. Navigating through submit button of modal does not.

WillianGruber · 2020-02-04T17:59:08Z

OK, so, adding the forceLoad parameter to NavigationManager.NavigateTo enables the scroll. The problem is that all context is lost, as this is a hard refresh. Maybe there is something lacking in the ModalClose that would enable scrolling.

WillianGruber · 2020-02-05T13:06:45Z

Something that could be related: in a page that has the scrollbar, the scroll disappears when the modal is open.

stsrki · 2020-02-05T13:16:05Z

I remember a similar problem was happening for modal dialog when used on DataGrid. Please check if the modal-open class is removed from <body> tag when navigation occurs.

WillianGruber · 2020-02-05T14:08:20Z

You are right, it is not removed.
Closing the modal removes it.
Closing and navigating does not.

stsrki · 2020-02-05T14:10:18Z

Maybe I could add handler for NavigationManager.LocationChanged to Modal and then react to the changes.

WillianGruber · 2020-02-05T14:15:27Z

Should it just be included in Close method?

My code in a modal button is as follows:

ModalGetKey.Hide();
...logic...
NavManager.NavigateTo("/SomePage");

Could Hide just remove the class?

stsrki · 2020-02-05T14:17:37Z

It should. But I cannot confirm it now as I have refactored most of Modal in v0.9 so maybe the behavior is different in v0.8.8.

WillianGruber · 2020-02-05T14:26:38Z

Ok. If you want to test it just create a page with lots of
<h1>aaa</h1> so that it has a scroll
and a modal that has a button that redirects to itself.

stsrki · 2020-04-22T21:23:12Z

Hi @WillianGruber I think this is fixed with 0.9. Can you re-check?

WillianGruber · 2020-04-22T21:26:52Z

Sure, when I get back home!

WillianGruber · 2020-04-23T14:34:18Z

Unfortunatelly, the bug still happens...

gaffkins · 2020-05-11T19:36:37Z

@WillianGruber I use ugly hack.
It's work when yout add some delay before navigate.

await UserService.SomeCodeOnServer();
firstLoginModal.Hide();
await Task.Delay(100);
NavigationManager.NavigateTo("/some-page");

stsrki · 2020-05-11T22:03:13Z

A little reproducible project would be great. @WillianGruber @gaffkins can you guys make it ?

WillianGruber · 2020-05-12T18:24:32Z

@stsrki it is a small piece of code so I'll post it here. If you still can't reproduce it I'll gladly create a new repo for it.

Have 2 pages, the "/" and the "Second".

Code in page "/":

@page "/"
@inject NavigationManager NavigationManager
<Button Margin="Margin.Is4.OnAll" Color="Color.Primary" Clicked="@GoToIndex">Redirect to "/"</Button>
<Button Margin="Margin.Is4.OnAll" Color="Color.Primary" Clicked="@ShowModal">Open Modal</Button>
<Modal @ref="ModalTest">
    <ModalBackdrop />
    <ModalContent Centered="true" Size="ModalSize.Default">
        <Form>
            <ModalHeader>
                <ModalTitle>
                    Test Modal
                </ModalTitle>
                <CloseButton Clicked="@HideModal" />
            </ModalHeader>
            <ModalBody>
            </ModalBody>
            <ModalFooter>
                <Button Color="Color.Secondary" Clicked="@HideModal">Cancel</Button>
                <Button Type="ButtonType.Submit" PreventDefaultOnSubmit="true" Color="Color.Primary" Clicked="@ModalSubmit">Continue</Button>
            </ModalFooter>
        </Form>
    </ModalContent>
</Modal>
<h1>Repeat this enough so you have a vertical scrollbar</h1>
<h1>Repeat this enough so you have a vertical scrollbar</h1>
<h1>Repeat this enough so you have a vertical scrollbar</h1>
<h1>Repeat this enough so you have a vertical scrollbar</h1>
<h1>Repeat this enough so you have a vertical scrollbar</h1>
<h1>Repeat this enough so you have a vertical scrollbar</h1>
<h1>Repeat this enough so you have a vertical scrollbar</h1>
<h1>Repeat this enough so you have a vertical scrollbar</h1>
<h1>Repeat this enough so you have a vertical scrollbar</h1>
<h1>Repeat this enough so you have a vertical scrollbar</h1>
<h1>Repeat this enough so you have a vertical scrollbar</h1>
<h1>Repeat this enough so you have a vertical scrollbar</h1>
<h1>Repeat this enough so you have a vertical scrollbar</h1>
<h1>Repeat this enough so you have a vertical scrollbar</h1>
<h1>Repeat this enough so you have a vertical scrollbar</h1>
<h1>Repeat this enough so you have a vertical scrollbar</h1>
<h1>Repeat this enough so you have a vertical scrollbar</h1>
<h1>Repeat this enough so you have a vertical scrollbar</h1>
<h1>Repeat this enough so you have a vertical scrollbar</h1>
<h1>Repeat this enough so you have a vertical scrollbar</h1>
<h1>Repeat this enough so you have a vertical scrollbar</h1>

@code {
    private Modal ModalTest { get; set; }

    void GoToIndex()
    {
        NavigationManager.NavigateTo("/");
    }

    private void ShowModal()
    {
        ModalTest.Show();
    }

    private void HideModal()
    {
        ModalTest.Hide();
    }

    private void ModalSubmit()
    {
        ModalTest.Hide();
        NavigationManager.NavigateTo("Second");
    }
}

Code in "Second":

@page "Second"
<h1>Repeat this enough so you SHOULD have a vertical scrollbar</h1>
<h1>Repeat this enough so you SHOULD have a vertical scrollbar</h1>
<h1>Repeat this enough so you SHOULD have a vertical scrollbar</h1>
<h1>Repeat this enough so you SHOULD have a vertical scrollbar</h1>
<h1>Repeat this enough so you SHOULD have a vertical scrollbar</h1>
<h1>Repeat this enough so you SHOULD have a vertical scrollbar</h1>
<h1>Repeat this enough so you SHOULD have a vertical scrollbar</h1>
<h1>Repeat this enough so you SHOULD have a vertical scrollbar</h1>
<h1>Repeat this enough so you SHOULD have a vertical scrollbar</h1>
<h1>Repeat this enough so you SHOULD have a vertical scrollbar</h1>
<h1>Repeat this enough so you SHOULD have a vertical scrollbar</h1>
<h1>Repeat this enough so you SHOULD have a vertical scrollbar</h1>
<h1>Repeat this enough so you SHOULD have a vertical scrollbar</h1>
<h1>Repeat this enough so you SHOULD have a vertical scrollbar</h1>
<h1>Repeat this enough so you SHOULD have a vertical scrollbar</h1>
<h1>Repeat this enough so you SHOULD have a vertical scrollbar</h1>
<h1>Repeat this enough so you SHOULD have a vertical scrollbar</h1>
<h1>Repeat this enough so you SHOULD have a vertical scrollbar</h1>
<h1>Repeat this enough so you SHOULD have a vertical scrollbar</h1>
<h1>Repeat this enough so you SHOULD have a vertical scrollbar</h1>
<h1>Repeat this enough so you SHOULD have a vertical scrollbar</h1>

The scroll won't work in the Second page. If you navigate further to other pages that needs scrolling through the sidebar, they won't work either.

WillianGruber · 2020-05-13T18:41:36Z

Btw, provider is Material, maybe it only happens with it.

gaffkins · 2020-05-13T18:46:50Z

@WillianGruber I had the same issue on bootstrap provider.

stsrki · 2020-05-13T22:18:42Z

Thanks @WillianGruber, your code helped to reproduce the bug. It is now fixed and should be available with next preview.

WillianGruber · 2020-05-13T22:20:26Z

Thanks!!!

WillianGruber · 2020-06-30T13:39:39Z

Just updated Blazorise. This is fixed, thank you!

stsrki added the Type: Possible Bug Needs to investigate more to see if it's an actual bug. label Jan 9, 2020

stsrki modified the milestones: 0.9, Backlog Feb 5, 2020

stsrki added this to Backlog in Development via automation Apr 20, 2020

stsrki modified the milestones: Backlog, 0.9.1 Apr 20, 2020

stsrki moved this from Backlog to To do in Development Apr 20, 2020

stsrki mentioned this issue Apr 20, 2020

Docs 0.9.1 #761

Closed

49 tasks

stsrki moved this from To do to In progress in Development Apr 22, 2020

stsrki moved this from In progress to Paused in Development Apr 23, 2020

stsrki moved this from 🛑 Paused to 💪 In progress in Development May 13, 2020

stsrki mentioned this issue May 13, 2020

fix: modal not removing the classname from modal when navigation occured #884

Merged

stsrki closed this as completed May 13, 2020

Development automation moved this from 💪 In progress to ✔ Done May 13, 2020

stsrki mentioned this issue Jun 16, 2020

No vertical scroll bar when navigating from modal window #986

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Scroll not working after NavigationManager navigation #483

Scroll not working after NavigationManager navigation #483

WillianGruber commented Jan 8, 2020

stsrki commented Jan 9, 2020

WillianGruber commented Jan 9, 2020

WillianGruber commented Feb 4, 2020

WillianGruber commented Feb 4, 2020

WillianGruber commented Feb 4, 2020

WillianGruber commented Feb 4, 2020

WillianGruber commented Feb 4, 2020

WillianGruber commented Feb 5, 2020

stsrki commented Feb 5, 2020

WillianGruber commented Feb 5, 2020

stsrki commented Feb 5, 2020

WillianGruber commented Feb 5, 2020

stsrki commented Feb 5, 2020

WillianGruber commented Feb 5, 2020

stsrki commented Apr 22, 2020

WillianGruber commented Apr 22, 2020

WillianGruber commented Apr 23, 2020

gaffkins commented May 11, 2020 •

edited

stsrki commented May 11, 2020

WillianGruber commented May 12, 2020

WillianGruber commented May 13, 2020

gaffkins commented May 13, 2020

stsrki commented May 13, 2020

WillianGruber commented May 13, 2020

WillianGruber commented Jun 30, 2020

Scroll not working after NavigationManager navigation #483

Scroll not working after NavigationManager navigation #483

Comments

WillianGruber commented Jan 8, 2020

stsrki commented Jan 9, 2020

WillianGruber commented Jan 9, 2020

WillianGruber commented Feb 4, 2020

WillianGruber commented Feb 4, 2020

WillianGruber commented Feb 4, 2020

WillianGruber commented Feb 4, 2020

WillianGruber commented Feb 4, 2020

WillianGruber commented Feb 5, 2020

stsrki commented Feb 5, 2020

WillianGruber commented Feb 5, 2020

stsrki commented Feb 5, 2020

WillianGruber commented Feb 5, 2020

stsrki commented Feb 5, 2020

WillianGruber commented Feb 5, 2020

stsrki commented Apr 22, 2020

WillianGruber commented Apr 22, 2020

WillianGruber commented Apr 23, 2020

gaffkins commented May 11, 2020 • edited

stsrki commented May 11, 2020

WillianGruber commented May 12, 2020

WillianGruber commented May 13, 2020

gaffkins commented May 13, 2020

stsrki commented May 13, 2020

WillianGruber commented May 13, 2020

WillianGruber commented Jun 30, 2020

gaffkins commented May 11, 2020 •

edited