paper-dialog-scrollable is broken: sizingTarget is not set correctly

[vlukashov]

Here is an example in Plunker: https://plnkr.co/edit/9nzSNs7Kd04IfStwnHuh?p=preview

Summary

Create a popup paper-dialog with a scrollable content as in this example from the Polymer docs. See that when the browser window is not big enough to fit the entire dialog contents, the scrollable behaviour is broken.

Expected behaviour

The opened paper-dialog fully fits into the browser window even when the size of the window is not enough to display all of the 'Lorem ipsum...' text. The 'Lorem ipsum...' text is fully contained within a scrollable div.

Actual behaviour

The opened paper-dialog sets its height based on the 'Lorem ipsum...' text height regardless of the browser window size. If the window size is not big enough to fit all the text, the bottom of the dialog continues below the screen border and becomes invisible. Scrolling does not work (even though there is content below, you could not scroll down.

Investigation

The correct behaviour of the paper-dialog-scrollable relies on the value of the sizingTarget property of the paper-dialog element. It needs to be set to the #scrollable

inside the paper-dialog-scrollable component.

The paper-dialog-scrollable's ready() method is the place where this would normally happen when angular2-polymer is not involved (see the _ensureTarget() method here)

However, when the angular2-polymer is used, that update to the the paper-dialog's sizingTarget property is detected and reversed. This happens inside the ngDoCheck() hook of the PolymerElement object corresponding to the paper-dialog component (see the line 260).

[Saulis]

Thanks for the detailed issue description!

Looks like sizingTarget doesn't have notify: true which in this case results in a situation where the angular2 component doesn't get notified that the value was changed inside _ensureTarget().

It's a tricky thing, since technically an element should not notify about changes to it's property coming from the outside – but in this case the new value isn't coming from the app but a parent element.