[select] Add support for binding to an array of items

[marcushellberg]

It would be convenient for developers if the APIs between <vaadin-combo-box> and <vaadin-select> were similar the same way they are in the Java API.

Proposal:

Add the following properties the same way as in combo box:

• items
• item-value-path
• item-label-path
• item-id-path

These could be used to internally configure the list box and simplify the usage.

[web-padawan]

A similar enhancement was previously suggested at vaadin/vaadin-select#77.

When we have renderer helpers for lit-element, it should be much easier to create a vaadin-list-box with items.

[tomivirkki]

Made a quick prototype of this at https://github.com/vaadin/web-components/compare/select-items-proto?expand=1

The change seems quite small, but it would bring a lot of value. This is how you'd assign dynamically fetched options now:

export class Example extends LitElement {
  @state()
  private options: Option[] = [];

  @query('vaadin-select')
  private select?: Select;

  async firstUpdated() {
    this.options = await fetchOptions();
    // Need to manually re-run the bound renderer whenever the item set changes dynamically
    // to have the new items available for keyboard selection (with the overlay closed)
    this.select?.requestContentUpdate();
  }

  render() {
    return html`
      <vaadin-select
        .renderer="${guard(
          [],
          () => (root: HTMLElement) =>
            render(
              html`
                <vaadin-list-box>
                  ${this.options.map(
                    (option) => html`
                      <vaadin-item value="${option.value}"> ${option.label}</vaadin-item>
                    `
                  )}
                </vaadin-list-box>
              `,
              root
            )
        )}"
      ></vaadin-select>
    `;
  }
}

This is how it would work with items:

export class Example extends LitElement {
  @state()
  private options: Option[] = [];

  async firstUpdated() {
    this.options = await fetchOptions();
  }

  render() {
    return html`<vaadin-select .items="${this.options}"></vaadin-select>`;
  }
}

[marcushellberg]

YES! This would make it so much easier to use Select ❤️

Right now, I find myself using ComboBox in many cases where I should be using Select just because the Select API is so tedious.

[web-padawan]

I agree the feature is important. Also the API looks good in terms of being aligned with vaadin-menu-bar 👍