0

I am using Lit 2.3 and try to use the the @vaadin/vaadin-dialog component from within my own Lit component to show an input field and access the value of it when a user clicks the Okay button. My own render method looks something like this:

render() {
    return html`
      <vaadin-dialog
          header-title="settings"
          .opened="${this.dialogOpened}"
          @opened-changed="${this.dialog_opened_change}"
          ${dialogRenderer(this.renderDialog, [])}
          ${dialogFooterRenderer(this.renderFooter, [])}
      ></vaadin-dialog>

    `
  }

And the renderDialog method that renders the inside of the dialog looks like this:

  private renderDialog = () => html`
    <div>
      <div class="settings-dialog">
        <label for="userid">User-Id</label><input name="userid" id="userid" type="text" value=${this.userid}>
      </div>
    </div>
  `

I can successfully open and close the dialog. What I don't understand is how to get the value of the input field after the dialog closed. And in fact I would also like to initialize the value of the input field without using a local state (${this.dockid}), but that at least works.

I tried accessing the values from within "this.dialog_opened_change" but I don't seem to understand what to hang my querySelector on to get to my <input>.

This is what I do, currently, but it looks unorthodox at best to me:

I call the method _apply_settings from a button within the dialog's footer

private renderFooter = () => html`
    <button class="modal-ok" id="apply_settings" @click="${this._apply_settings}">
    </button>
  `

And in the _apply_settings I poke around in the DOM to get to the vaadin-dialog's overlay and use that as a starting point for querySelector:

private _apply_settings(e: Event) {
    let overlay = (<HTMLElement>e.target)?.parentNode?.parentNode
    let settings = new Settings()
    settings.user_id = (<HTMLInputElement>overlay?.querySelector("#userid")).value
    this._close_settings()
  }

While this works for now, I have trouble believing that it is the way it should be. The documentation unfortunately stops at showing a dialog and never explains how to access things so I wonder if I am missing something entirely trivial?

norman
  • 599
  • 1
  • 5
  • 14
  • 1
    With a reactive UI programming model, you rarely want to access values imperatively through element references like this. Add a value change listener on the input to update the `this.userid` state instead. – Marcus Hellberg Aug 24 '22 at 17:17
  • yes, I thought I might still not be getting the paradigm here. So I would add a userId to my surrounding class (let's call it dialogUserId) and update it whenever the event listener on the input fires and when finally my okay button gets hit I copy the contents of dialogUserId to my real userId (which I only want to update if users hits okay in the dialog)? That intermediate dialogUserId seemed kinda redundant to me given that the value is always stored in the . – norman Aug 24 '22 at 18:25
  • I have same complains about vaadin docs. @MarcusHellberg what about if I use vaadin-text-field and want to use validate() on it before gather any values from that field. As a good workaround is to use lits ref direcive to capture those input fileds and access them via reference. – George Jan 05 '23 at 11:32

0 Answers0