Matblazor: Drawer keeps opening

[kristof12345]

Hi!

After I open MatDrawer I can't really close it. It keeps reopening every time I try to close it.
My code is:

@inherits LayoutComponentBase

<MatThemeProvider Theme="@theme">
    <MatDrawerContainer Style="width: 100vw; height: 100vh;">
        <MatDrawer @bind-Opened="@Opened" Mode="@MatDrawerMode.Modal">
            <ul class="nav flex-column">
                <li class="nav-item px-3">
                    <NavLink class="nav-link" href="/">
                        <span class="oi oi-plus" aria-hidden="true"></span> Login
                    </NavLink>
                </li>
                <li class="nav-item px-3">
                    <NavLink class="nav-link" href="weather">
                        <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
                    </NavLink>
                </li>
            </ul>
        </MatDrawer>
        <MatDrawerContent>
            <div>
                <MatButton OnClick="@((e) => ButtonClicked())">Open Menu</MatButton>
            </div>
            @Body
        </MatDrawerContent>
    </MatDrawerContainer>

</MatThemeProvider>

@code{

    MatTheme theme = new MatTheme()
    {
        Primary = "#0071BC",
        Secondary = "#048c26"
    };

    bool Opened = false;

    void ButtonClicked()
    {
        Opened = !Opened;
    }
}

Thanks for the help.

[EduVencovsky]

I have this same problem, I just didn't reported this issue because in the docs it works normally and I thought it was some problem with my project (other css or js changing matblazor things).

[kristof12345]

I have this same problem, I just didn't reported this issue because in the docs it works normally and I thought it was some problem with my project (other css or js changing matblazor things).

Please share if you find a workaround.

[EduVencovsky]

Haven't find yet. I actually have no idea how this doesn't happen in the docs

[enkodellc]

Can you update this fiddle to recreate the issue? I see there is an issue when you have use the drawer as a child of the MatThemeProvider. When this is done I am getting the issue that the bind-Opened does not work. Basically when the drawer is closed the Opened variable is not updated. I think there are several other issues when you start embedding MatBlazor components.. strange things occur.

Here is my BlazorFiddle to show the issue I described above using mostly your code: https://blazorfiddle.com/s/079mfysz

[kristof12345]

Hi!

I uncommented the ThemeProvider and added @Body. In this environment the Drawer closes but the "Opened" variable remains true.

https://blazorfiddle.com/s/x55x17id

[kristof12345]

Can you update this fiddle to recreate the issue? I see there is an issue when you have use the drawer as a child of the MatThemeProvider. When this is done I am getting the issue that the bind-Opened does not work. Basically when the drawer is closed the Opened variable is not updated. I think there are several other issues when you start embedding MatBlazor components.. strange things occur.

Here is my BlazorFiddle to show the issue I described above using mostly your code: https://blazorfiddle.com/s/079mfysz

Modified: (see post above)
https://blazorfiddle.com/s/x55x17id

[kristof12345]

Can be solved by:

<MatDrawerContainer Style="width: 100vw; height: 100vh;" @onclick="@CloseMenu">
...
    void CloseMenu()
    {
        Opened = false;
    }

[kristof12345]

I still don’t think that this is the expected behavior. It’s just a workaround. So I don’t think that the issue should be closed.

[enkodellc]

@kristof12345 sure I could not re-create your exact issue. If the code you are using is in this fiddle then maybe tell me more information to recreate... maybe browser.

[enkodellc]

@kristof12345 please explain why you now closed this issue? Was it resolved?

[kristof12345]

You could not recreate it, I couldn't provide more info.
Maybe it only happens on macOS (tried Chrome and Safari latest versions). But the docs version works well on the same platform...

For me the solution above did the trick.

More info: this only happens if you try to close by clicking the "darker area". Closing by the button works well.

[lindespang]

To me the bug is consistent, clicking the scrim doesn't update the bound value, it stays true. You don't experience it in the blazorfiddle @enkodellc ?

[enkodellc]

Please give me exact steps a BlazorFiddle to recreate.

I used this one: https://blazorfiddle.com/s/079mfysz and I can click on the darker area and it hides fine and the flag is updated fine.

[EduVencovsky]

Not sure if I'm getting the correct fiddle but

This fiddle provided by @kristof12345 have the problem https://blazorfiddle.com/s/x55x17id

This fiddle provided by @enkodellc doesn't have the problem https://blazorfiddle.com/s/079mfysz

And the example that works, have the MatThemeProvider commented out.

So looks like that MatThemeProvider is causing the problem?

This issue needs to be reopened

[kristof12345]

Yes it seems to be the cause.

[IuriBaltieri]

Not sure if I'm getting the correct fiddle but

This fiddle provided by @kristof12345 have the problem https://blazorfiddle.com/s/x55x17id

This fiddle provided by @enkodellc doesn't have the problem https://blazorfiddle.com/s/079mfysz

And the example that works, have the MatThemeProvider commented out.

So looks like that MatThemeProvider is causing the problem?

This issue needs to be reopened

I was getting the same problem. The comment of @EduVencovsky worked for me.
To solve that, just remove the MatThemeProvider parent of your MatDrawerContainer. But it isn't a good solution yet. It cause a colateral effects in your UI provided by the theme. This issue needs to be reopened.

[diegorod]

I had been frying my brain troubleshooting this issue on and off recently and the MatThemeProvider wrapping the contents of layout (like the @kristof12345 ) was the issue - although in my case it wasn't reopening it was just not setting the bound value variable to false which required user to click the menu button twice to open it again. Wrapping the router in App.razor file with MatThemeProvider did the trick for me.

Debugging shows everything is great in the BaseMatDrawer CloseHandler() method until it gets to OpenedChanged.InvokeAsync(false); line then the _opened field for some reason changes back to true (should be false).

[EduVencovsky]

Wrapping the router in App.razor file with MatThemeProvider

This worked for me too. If there isn't a fix for this, it would be good to add in the docs something that mentions this problem and tell people to add the MatThemeProvider wrapping App.razor and not inside of it