Using Polymer 2, app-datepicker-dialog doen't show up

[stefounie95]

Description

Using Polymer 2, the app-datepicker-dialog element doesn't show when click on a button.

Code example

<link rel="import" href="bower_components/polymer/polymer-element.html">
<link rel="import" href="bower_components/app-datepicker/app-datepicker.html">
<link rel="import" href="bower_components/paper-dialog/paper-dialog.html">

<dom-module id="my-el">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>

    <app-datepicker-dialog id="dia"></app-datepicker-dialog>

    <button on-tap="openDialog">plain dialog</button>
  </template>

  <script>
    class MyEl extends Polymer.Element {
      static get is() { return 'my-el'; }
      static get properties() {
        return {
          prop1: {
            type: String,
            value: 'my-el'
          }
        };
      }

      openDialog(){
          console.log("open");
          this.$.dia.show(); //tried all this : this.$.dia.open(), this.$.dia.toggle(), this.$.dia.show(), this.$.dia.dialog("open")
      }
    }

    window.customElements.define(MyEl.is, MyEl);
  </script>
</dom-module>

Steps to reproduce

1. Put a app-datepicker element in the page.
2. Click on a button to open the dialog

Browser used

Chromium

[motss]

@stefounie95

I think you must have imported the wrong HTML file.

Let's try it again with the following code.

<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/app-datepicker/app-datepicker-dialog.html">

<dom-module id="my-el">
  <template strip-whitespace>
    <style>
      :host {
        display: block;
      }
    </style>

    <app-datepicker-dialog id="dialog"></app-datepicker-dialog>

    <button on-tap="openDialog">plain dialog</button>
  </template>

  <script>
    class MyEl extends Polymer.Element {
      static get is() { return 'my-el'; }
      static get properties() {}

      openDialog(){
        this.dialog.open();
      }

      get dialog() { return this.shadowRoot.querySelector('#dialog'); }
    }

    window.customElements.define(MyEl.is, MyEl);
  </script>
</dom-module>

[stefounie95]

With your solution, it works ! Thank you very much !

Just a thing to add on the dependancies : it needs the package "paper-button" on the bower_components to works, and the "web-animations-js" to have the animations