Combobox entries via API support

[gregjotau]

We're going to test this week the new experimental combobox.

It does most of what we need seemingly based on the docs.

The only thing is getting the values from the API. TBH, for most comboboxes I think it will be fine to just server-side render all the available values. But there are cases ther might be 1000+ entries. And also cases where you might want to add an entry (in another tab or through modal, for example new customer when doing invoicing), and then for the combobox to update without a page refresh.

[claviska]

We wanted to get combobox out as soon as possible, so we intentionally skipped async + virtualization for the initial release. In fact, I'm not sure we want to do virtualization at all, as that would still require a DOM element for each option.

We've been thinking about ways to handle filtering asynchronously, which would likely satisfy your use case, but that needs to be developed and vetted for accessibility.

[gregjotau]

Thanks, yeah, we're already working on switching out our custom combobox to WA right now, already added it a few places for app.reai.no :

[gregjotau]

@claviska any update on this? for now we have an "r-api-combobox" custom component for this?

[claviska]

Nothing yet. We have a pattern for this in Data Grid now, so that might help move things along. I'll try to get to this soon.

[jamesblacklee]

Plus one request for this please! I guess a 'server side' option for <wa-combobox> to handle searching large datasets (currently too much to load client-side). Unless of course you think better to break out to a new component such as <wa-autocomplete> but I guess it would duplicate a lot of functionality.

[claviska]

Update: I just submitted a PR in core and Pro to support this. Items can be added one of two ways through the dataSource property:

With value/label objects:

combobox.dataSource = async ({ query, signal }) => {
  const response = await fetch(`/api/countries?q=${encodeURIComponent(query)}`, { signal });
  return response.json(); // [{ value: 'ca', label: 'Canada' }, ...]
};

With HTML:

<wa-combobox id="combobox-custom" label="Assignee" placeholder="Search people"></wa-combobox>

<script type="module">
  const combobox = document.querySelector('#combobox-custom');

  const people = [
    { value: 'ada', label: 'Ada Lovelace', icon: 'calculator' },
    { value: 'alan', label: 'Alan Turing', icon: 'key' },
    { value: 'grace', label: 'Grace Hopper', icon: 'anchor' },
    { value: 'katherine', label: 'Katherine Johnson', icon: 'rocket' },
  ];

  // This stands in for a request to your server
  combobox.dataSource = async ({ query }) => {
    await new Promise(resolve => setTimeout(resolve, 500));

    return people
      .filter(person => person.label.toLowerCase().includes(query.toLowerCase()))
      .map(
        person => `
          <wa-option value="${person.value}">
            <wa-icon slot="start" name="${person.icon}"></wa-icon>
            ${person.label}
          </wa-option>
        `,
      )
      .join('');
  };
</script>