bug(drawer): mat-sidenav-opened/mat-drawer-opened not set when open

[karlhaas]

Bug:

mat-sidenav-opened/mat-drawer-opened not set when open after upgrade to latest release

What is the expected behavior?

CSS class mat-drawer-opened set when sidenav is open

What is the current behavior?

CSS class mat-drawer-opened not set

What are the steps to reproduce?

https://material.angular.io/components/sidenav/examples

What is the use-case or motivation for changing an existing behavior?

that's the question :)

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 4.3.6
Material/CDK: 2.0.0-beta.10 and material2-builds.git#32daeb981986c3f925ac59a58cd95023f971b431

[willshowell]

It looks like .mat-drawer-opened is set on the md-sidenav-container when the sidenav mode is set to "over" or "push". It does not get added with "side" mode.

[demiro]

To me it happens the same when I have the in app-component
and then the sidenav in another... it doesn't get triggered.... how can I do it programatically?

[josephperrott]

I believe this is working as intended. As @willshowell mentioned, .mat-drawer-opened is only added in over and push modes. As you can see here, it is watched for if mode !== 'side'.

If you are seeing different can you provide a plunker showing the issue you are seeing? I am not quite sure I follow what you are seeing.

[willshowell]

@josephperrott I could have sworn this was a regression, but just looked through the blame and it does seem this behavior has been in place for >1 year.

That said, there is specific effort in the drawer class logic to prevent .mat-drawer-opened from getting added to the drawer when in 'side' mode, but as you can see, the effect is blocked in the CSS anyway. Perhaps this issue can be repurposed to having .mat-drawer-opened always be added to open drawers, as that would be the expected behavior without having to dive into the source.

https://github.com/angular/material2/blob/3571f68a2de0833ee4741af8a0eb24d1da174f38/src/lib/sidenav/drawer.scss#L114-L120

Note, it is used in one other instance, but could easily be blocked in CSS too if necessary:

Source

https://github.com/angular/material2/blob/3571f68a2de0833ee4741af8a0eb24d1da174f38/src/lib/sidenav/drawer.scss#L39-L46

[snapnurse-joshuamatthews]

@josephperrott I am not seeing the class being added in beta 12. Seems related to the nav container and the nav element being housed in different components.

[snapnurse-joshuamatthews]

I got mine working. The issue is transclusion. Because the sidenav takes all content after the sidenav element and turns it into the sidenav-content element, and because I had a inside of the sidenav container, it was wiring up all of the content as the sidenav-content and not seeing the that is the first element in the transclusion. Maybe this is something that can be fixed?

[jelbourn]

We haven't been able to reproduce this issue. Feel free to open a new issue if you are able to provide a reproduction via StackBlitz.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}