Blazorise: Scroll not working after NavigationManager navigation

Created on 8 Jan 2020  路  25Comments  路  Source: stsrki/Blazorise

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)

Possible Bug
Source
picture WillianGruber

Most helpful comment

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

picture stsrki on 14 May 2020
🚀1 ❤1 👍1

All 25 comments

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?

stsrki picture stsrki on 9 Jan 2020

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 picture WillianGruber on 9 Jan 2020

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 picture WillianGruber on 4 Feb 2020

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

WillianGruber picture WillianGruber on 4 Feb 2020

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 picture WillianGruber on 4 Feb 2020

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 picture WillianGruber on 4 Feb 2020

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 picture WillianGruber on 4 Feb 2020

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

WillianGruber picture WillianGruber on 5 Feb 2020

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.

stsrki picture stsrki on 5 Feb 2020

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

WillianGruber picture WillianGruber on 5 Feb 2020

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

stsrki picture stsrki on 5 Feb 2020

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?

WillianGruber picture WillianGruber on 5 Feb 2020

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.

stsrki picture stsrki on 5 Feb 2020
👍1

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.

WillianGruber picture WillianGruber on 5 Feb 2020
👍1

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

stsrki picture stsrki on 22 Apr 2020

Sure, when I get back home!

WillianGruber picture WillianGruber on 22 Apr 2020

Unfortunatelly, the bug still happens...

WillianGruber picture WillianGruber on 23 Apr 2020

@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");

gaffkins picture gaffkins on 11 May 2020

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

stsrki picture stsrki on 12 May 2020

@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 picture WillianGruber on 12 May 2020
👍1

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

WillianGruber picture WillianGruber on 13 May 2020

@WillianGruber I had the same issue on bootstrap provider.

gaffkins picture gaffkins on 13 May 2020
👍2

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

stsrki picture stsrki on 14 May 2020
🚀1 ❤1 👍1

Thanks!!!

WillianGruber picture WillianGruber on 14 May 2020

Just updated Blazorise. This is fixed, thank you!

WillianGruber picture WillianGruber on 30 Jun 2020
👍1
Was this page helpful?
0 / 5 - 0 ratings

Related issues

imtrobin picture imtrobin  路  4Comments
danlbb picture danlbb  路  4Comments
smilyte picture smilyte  路  3Comments
satwo picture satwo  路  5Comments
stsrki picture stsrki  路  3Comments