vaadin-dialog components not rerendering when properties change

I'm using a vaadin-dialog in my Web Components app. I would like the components inside to render on properties change but they don't.

I have a couple properties in my web component:

  static get properties() {
    return {
      title: { type: String },
      username: { type: String },
      signUpOpened: { type: Boolean },
    };
  }

The dialog is defined as such. I use a function to bind it to the DialogRenderer. The dialog shouldn't be always open, so the user clicks it to open it.

  render() {
    return html`
      <main>
        <h1>${this.title}</h1>

        <vaadin-dialog
          header-title="SignUp"
          .opened="${this.signUpOpened}"
          @opened-changed="${e => (this.signUpOpened = e.detail.value)}"
          ${dialogRenderer(this.signUpRenderer)}
          id="signUp">

        </vaadin-dialog>
      </main>

    `;
  }

  signUpRenderer() {
    return html`
        <vaadin-text-field value="${this.username}" @change="${(e) => {
          this.username = e.target.value
        }}" label="email"></vaadin-text-field>

        <vaadin-text-field value="${this.username}" }}" label="email-copy"></vaadin-text-field>
        <p>${this.username}</p>

    `;
  }

You can try the demo over here, the source code is here.

When changing the value of the text field, you can see that the other text field and the paragraph don't update.

Can you folks direct me towards what is going on?

Solution

The dialogRenderer directive that you are using to render the contents of the dialog needs to know whether the data used in the rendering has changed in order to determine whether it should rerender the contents or not. For that purpose the directive has a second parameter that allows you to pass in an array of dependencies that will be checked for changes. In your example, you should apply the directive like so, in order for it to re-render when the username changes:

<vaadin-dialog
  ...
  ${dialogRenderer(this.signUpRenderer, [this.username])}>
</vaadin-dialog>

This is explained in the directive's JSdoc, unfortunately the directives do not show up in the component's API docs at the moment. You could open an issue here and request to improve the component documentation to add a section that explains how the directives work.