<app-drawer-layout> overrides <app-drawer> initial values

[e111077]

Description

app-drawer-layout is overriding the initial values for app-drawer.

Expected outcome

With a narrow screen, if the initial value of opened in app-drawer is set to true the drawer should be showing.

Actual outcome

With a narrow screen, if the initial value of opened in app-drawer is set to true the drawer is not showing and opened is set to false.

Live Demo

https://jsfiddle.net/rckqb1q7/6/

Steps to reproduce

1. Have a narrow screen
2. Bind an opened value to app-drawer
3. Set the default value to true

Browsers Affected

• Chrome
• Firefox
• Safari 9
• Safari 8
• Safari 7
• Edge
• IE 11
• IE 10

[keanulee]

This is tricky - we can change it so we don't set drawer.opened when the layout is narrow in resetLayout (https://github.com/PolymerElements/app-layout/blob/master/app-drawer-layout/app-drawer-layout.html#L220), but that means when you resize the window from wide to narrow the drawer won't automatically close. Wonder how common it is to use app-drawer-layout with the drawer opened by default in narrow layout.

[e111077]

I think that a way to fix this would be to have a property in app-drawer-layout that controls whether reactiveness is on or off.

This would allow for app-drawer.opened's initial values to show when reactiveness is turned off, but they would be masked when reactiveness is turned on. This is different from simply omitting app-drawer-layout because it gives the option for reactiveness to exist later. It isn't completely intuitive, but it at least allows for every possible starting state.