Dialog does not clear .mdc-dialog-scroll-lock when closed

[stefer]

Describe the bug When a dialog is opened with DialogService and then closed, scrollbars on main page are hidden.

To Reproduce Steps to reproduce the behavior:

1. Go to https://www.matblazor.com/DialogService, down to examples.
2. Open Devtools and look at body element classes. There is no .mdc-dialog-scroll-lock set.
3. Click "Ask", a dialog is opened. The body element now has class .mdc-dialog-scroll-lock
4. Click Cancel
5. body element still has class .mdc-dialog-scroll-lock

Expected behavior The body element should not have the class .mdc-dialog-scroll-lock when dialog is closed. Depending on the page structure, this will mess up scroll bars.

Additional context BaseMatDialog.IsOpen calls matBlazor.matDialog.setIsOpen which in turn sets or removes the class .mdc-dialog-scroll-lock. However, BaseMatDialog.IsOpen is not set when dialog is closed.

[jmanuel28]

I have the same issue, after closing a dialog the screen is not able to scroll, I figured out it is because of the class .mdc-dialog-scroll-lock being added to the

tag

[Simon-Miller]

I've created my own wrapper component which when the dialog closes calls a bit of TypeScript to fix it:

`export class matDialogueFix {

    public static makeWindowScrollbarVisibleIfNeeded(): void {
        document.querySelector("body.mdc-dialog-scroll-lock")?.classList.remove("mdc-dialog-scroll-lock");
    }
}`

Works for now - until the real problem is fixed.

[OscarLate]

I've created my own wrapper component which when the dialog closes calls a bit of TypeScript to fix it:

`export class matDialogueFix {

    public static makeWindowScrollbarVisibleIfNeeded(): void {
        document.querySelector("body.mdc-dialog-scroll-lock")?.classList.remove("mdc-dialog-scroll-lock");
    }
}`

Works for now - until the real problem is fixed.

Hi,

I have same issue, can you be more explicit? I'm newbie in TypeScript and dont know about call this function when close window.

Thanks dude for share.

Regards

[Simon-Miller]

MatBalzor.DialogFudge.zip

I've taken the time to write an example. Too much for a fiddle! I used a normal javascript file instead of worrying about javascript. hope that helps? I've left a couple of comments around the code base. This is literally out-of-the-box Blazor (server) with MatBlazor pulled in as a NuGet package. It shouldn't be hard to move the component to your own project(s). I called it OscarDialog. I kept it simple - but the moment you start dealing with js-interop, Blazor gets a lot more complicated from the perspective of a newbie. Fortunately, MatBlazor and other libraries can help you lose your dependence on javascript, if that's your goal.

[stefer]

I ended up not using dialog service. Instead I use MatDialog as a component of the page, and that works fine.

[OscarLate]

MatBalzor.DialogFudge.zip

I've taken the time to write an example. Too much for a fiddle! I used a normal javascript file instead of worrying about javascript. hope that helps? I've left a couple of comments around the code base. This is literally out-of-the-box Blazor (server) with MatBlazor pulled in as a NuGet package. It shouldn't be hard to move the component to your own project(s). I called it OscarDialog. I kept it simple - but the moment you start dealing with js-interop, Blazor gets a lot more complicated from the perspective of a newbie. Fortunately, MatBlazor and other libraries can help you lose your dependence on javascript, if that's your goal.

Works fine dude, thanks. I know about JS-interop and I have my own blazor components but I expected it to be in a totally different way than how JavaScript functions are called ( more friendly than "JSInterop.InvokeVoidAsync("stringJSFunction") ) ", but why TypeSript instead of javascript? I'm newbie in TypeScript ( just know that exists haha ) and thought it would have some advantage to use TypeScript with blazor ( as both are of Microsoft).

My english isn't good but you reply works fine, thanks again.

Regards,

[Simon-Miller]

@OscarLate Typescript adds capabilities (at compile time) that don't exist in javascript. For example, Typescript allowed you to create classes long before that was a part of javascript. Right now, you can use interfaces, and generics much as you can with C#, and although javascript doesn't support it, the TypeScript compiler does! So in essence, TypeScript is like a half-way between Javascript and C#.

I've taken developers who hate front-end code (javascript) but loved C#, and got them developing things in TypeScript pretty quickly, and they end up liking front-end development as a result. Personally, I find it more natural for C# developers to organise their Typescript code using namespaces much as they would with their C#.

namespaces are not going to work for you if you want to integrate with 'standard' modules in javascript / NPM, so once a little more familiar with TypeScript, it's time to move on. From that point, TypeScript stops looking so much like C#. But TypeScript does come with some serious advantages over Javascript. For example, as the code it generates can be directed at specific versions of javascript - therefore you can enjoy classes and generics whilst knowing your code could still run on a Windows XP machine with IE 6!! Not that you'd want to....

If you're using Visual Studio, you can configure TypeScript to compile files as you save them. This is really handly, but pretty soon you have lots of little javascript files that need bundling. This is part of the pain I think we're trying to get away from with Blazor, and MatBlazor. So TypeScript for me, is a rare thing nowadays. but I'd still choose it over vanilla Javascript in a heartbeat.

[RicoSuter]

I have the same issue.

It seems that the reference just removes the dialog from the DOM but does not call the JS method which could cleanup the body etc.

https://github.com/SamProf/MatBlazor/blob/master/src/MatBlazor/Components/MatDialogService/MatDialogService.cs#L118

Here we probably want to get hold of the actual BaseMatDialog and set IsOpen = false, no?

[Christian-Oleson]

@stefer @Simon-Miller , Thanks for reporting! We are always looking for contributors if you want to open a PR and tackle this. 🙂

[Ogglas]

I choose a different solution until this is fixed. Edit Client\wwwroot\css\app.css and add the following:

body.mdc-dialog-scroll-lock {
    overflow: inherit;
}

If the page is scrollable you will see a scrollbar when you open the dialog but nothing will break anymore.

[crAZiAc]

body.mdc-dialog-scroll-lock { overflow: inherit; }

I could not get this to work. matblazor.css keeps overwriting this in execution

[Ogglas]

@crAZiAc

For me MatBlazor adds class="mdc-dialog-scroll-lock" to html body but overflow: hidden; is overridden by my CSS given that matBlazor.css looks like this:

.mdc-dialog-scroll-lock {
    overflow: hidden;
}

From Chrome:

[alucav]

shocking that this is still an issue. i just ran into it as well. adding the following to your scss fixes it:

:global(body.mdc-dialog-scroll-lock) {
    overflow: inherit;
}