Vaadin Dialog does not detect property changes

Hi,
I am using vaadin dialog box to show a list of values from an array. Initially I have values in the array and that get shown in the dialog box.But, when the array is changed, the list doesn’t get refreshed. I have a sample created here to replicate the issue https://glitch.com/edit/#!/candied-narcissus?path=app.js:95:0 > (There is a show button in the glitch where I put the sample which can be used to see the working of the sample code) I put a button to manually refresh the list but the change doesnt reflect on vaadin dialog.
Any help is appreciated.

My render code looks like this

 render() {
    return html`
      <p>Selected date: ${this.selectedDate}</p>
      <vaadin-button @click="${this._onClick}">Toggle dialog</vaadin-button>
      <vaadin-dialog 
        ?opened="${this.opened}" 
        .renderer="${this._boundDialogRenderer}" 
        @opened-changed="${this._onOpenedChanged}"
      ></vaadin-dialog>
    `;
  }
  
  dialogRenderer(root) {
    render(
      html`
      <vaadin-button @click="${this.changeList}"
          >Change List</vaadin-button
        >
        <vaadin-date-picker @change="${e => this.selectedDate = e.target.value}"></vaadin-date-picker>
      ${this._columns
              ? this._columns.map(
                  column =>
                    html`<p>${column.header} </p>`
 )
              : html``}
      `, 
      root
    );
  }

vaadin-dialog only calls the renderer every time the dialog is opened. In your example if you click the “Change List” the dialog still stays open (but doesn’t re-render), if you then close it and open the dialog again you see the updated contents.

So in this case if you want to update the dialog contents while it’s open you need to manually call the render() method on the dialog after changing the source data (at the end of changeList).

So basically you just need to call this.dialog.render(); at the end of your changeList() method.

See the API docs for vaadin-dialog: https://cdn.vaadin.com/vaadin-dialog/2.2.1/#/elements/vaadin-dialog

Btw thanks for the Glitch example! Here’s a working one with the fix: https://glitch.com/edit/#!/obtainable-ragdoll?path=app.js:72:25

Thanks much Kari. It worked.