MatDrawer stops opening under certain conditions.

[MarkStega]

I have a MatDrawer holding a navigation menu in my app

<MatDrawerContainer Style="width: 100vw; height: 100vh;" Class="@pDrawerClass">
    <MatDrawer @bind-Opened="@pNavigationDrawerOpened" Mode="@MatDrawerMode.Modal">
        <header class="drawer-header">
            <div class="drawer-logo">
                <a class="miniHover" href="/">
                    <img alt="Optimi$er.2020" class="logo-img" src="_content/Optimiser.Components/Images/Optimium_Man_20.png" title="Optimi$er.2020">
                </a>
            </div>
        </header>
        <NavMenu pNavigationMenuSelect="NavigationMenuSelect"/>
    </MatDrawer>
    <MatDrawerContent>
        <MatAppBarContainer>
            </MatAppBar>
            <MatAppBarContent>
                <section>
                    @Body
                </section>
            </MatAppBarContent>
        </MatAppBarContainer>
    </MatDrawerContent>
</MatDrawerContainer>

The NavMenu component has the following:

<MatNavMenu Multi="true" Class="app-sidebar">

    <MatNavItem OnClick="@((e) => InternalNavigationMenuSelect("homeview"))">
        <MatIcon>home</MatIcon> <span class="miniHover">Home</span>
    </MatNavItem>
...
</MatNavMenu>

The internal nav menu selection simply does an InvokeAsync back to the supplied method. If the method simply does the navigation

        public void NavigationMenuSelect(string ev)
        {
            pNavigationManager.NavigateTo("/" + ev);
        }

all is ok, however if I add a close for the drawer with

            pNavigationDrawerOpened = false;

right before the navigation then the drawer closes, the navigation occurs, but then my toggle for the menu no longer works and setting the property to true no longer causes the nav drawer to appear.

Any thoughts?

[enkodellc]

I believe I understand the issue you are having. I would create a BlazorFiddle for others to test. Off the top of my head I would say it's either an issue with lifecycle of the routing / or asynchronous events.

One hack that might be worth try though is pass a query string parameter to the redirect page that sets that variable. So it is done on the initialization of the redirect page... Assuming that the pNavigationDrawerOpened is in MainLayour / CascadingParameter.

[MarkStega]

Keith / SamProf This repo is the smallest I could make that demos the issue "git clone [email protected]:MarkStegaOHI/matblazorbrokendrawer.git" Run either SSB or CSB, open the menu, pick any menu item. Navigation occurs and the menu closes. The menu will not reopen. If you comment out the 35th line of MainLayout.razor.cs (pNavigationDrawerOpened = false;) then the drawer can open and close (but I want the 'autoclose' to work).

[enkodellc]

@MarkStega I am going through the PR's related to NavMenu. Is this still an issue for you?

[MarkStega]

@enkodellc Keith, no, I ended up doing my own CSS/Component to get it to work the way I needed. I do think that the issue is still relevant, just not for me...

[jweschenfelder]

We experienced this issue today, too. Providing a simple BlazorFiddle to reproduce this issue is not possible, we would have to provide the whole Blazor WASM project then because the navigation between the pages is quite complex. We are using NavigationManager and EventHandler.

We call inside of EventHandler function: showMenu = true; matDrawer.InvokeStateHasChanged();

And: <MatDrawer @bind-Opened="showMenu" @ref="matDrawer"> <NavMenu /> </MatDrawer>

...and it does not re-open.