PolymerElements / paper-dialog-scrollable

A scrollable area used in a Material Design dialog
15 stars 18 forks source link

fix the lifecycle init for ensure target #61

Closed fincha closed 7 years ago

fincha commented 7 years ago

in our current custom dialog component we implement the Polymer.PaperDialogBehavior but the paper-dialog-scrollable wasn't able to locate the behavior, only in the host property

our current implementation:

<paper-dialog-scrollable role="document">
    <slot name="dialog-content"></slot>
</paper-dialog-scrollable>

the JS code

ready: function () {
    this.$$('paper-dialog-scrollable').dialogElement = this;
}

the problem is in this function:

    _ensureTarget: function () {
      // read parentNode on attached because if dynamically created,
      // parentNode will be null on creation.
      this.dialogElement = this.dialogElement || Polymer.dom(this).parentNode;
      // Check if parent implements paper-dialog-behavior. If not, fit scrollTarget to host.
      if (this.dialogElement && this.dialogElement.behaviors &&
          this.dialogElement.behaviors.indexOf(Polymer.PaperDialogBehaviorImpl) >= 0) {
        this.dialogElement.sizingTarget = this.scrollTarget;
        this.scrollTarget.classList.remove('fit');
      } else if (this.dialogElement) {
        this.scrollTarget.classList.add('fit');
      }
    }

if you consol.log the this.dialogElement you will see the #shadow-root element, and this element does not has the behaviors, but if you try to look up them in the this.dialogElement.host - they are there... I believe this is most clear solution, instead of checking for root.