Events from Vaadin dialog box not firing

Hi,
I have a litelement which has one vaadingrid and a vaadin-dialog .

<vaadin-dialog no-close-on-esc no-close-on-outside-click>
      <template>

<div>
Are you sure ?
<vaadin-button @click="${this.okDialog}" >OK</vaadin-button>
<vaadin-button @click="${this.canceldialog}" >Cancel</vaadin-button>
</div>
</template>

      </vaadin-dialog>
        <vaadin-button @click="${this.showPopup}" >Show Confirmation Dialog</vaadin-button>

I have 3 methods inside the js file as below


class MyClass extends LitElement {
....

get dialog() {
    return this.shadowRoot.querySelector('vaadin-dialog');
  }
okDialog() //this doesn't work
  {
    this.dialog.opened=false;
    console.log('Ok button clicked');

  }

  canceldialog() //this doesn't work
  {
    this.dialog.opened=false;
    console.log('Cancel button clicked');

  }
  
  
  showPopup() // this works
  {
    this.dialog.opened = true; 
    console.log('_emailEdit');
  }
....

}

Button clicks (canceldialog and okDialog) inside the vaadin-dialog components dont get fired. Any help is appreciated.

Hi! Lit doesn’t process the content defined in Polymer templates, so you should use dialog’s renderer function instead. You can find an example here: https://glitch.com/edit/#!/vaadin-dialog-renderer?path=app.js1:0

Another way to set the renderer-function by waiting for Lit to finish rendering:

import { render } from 'lit-html';

class MyClass extends LitElement {

  constructor() {
    super();
    this.updateComplete.then(() => {
      this.dialog.renderer = root => {
        render(html`
          Are you sure ?
          <vaadin-button @click="${this.okDialog.bind(this)}">OK</vaadin-button>
          <vaadin-button @click="${this.cancelDialog.bind(this)}">Cancel</vaadin-button>
        `, root);
      }
    });
  }

Thanks very much Pekka Maanpää. It worked :slight_smile: