Listbox: More control over keyboard filtering

[epavletic]

Is there a way to extend the way the keyboard filtering works when a Listbox is open, to take more than the label shown for each option into account? This would be especially useful when binding objects as values.

Let’s say we have a Listbox where the user is supposed to pick their phone country code. The data looks like this:

const countries = [
  {
    code: 'AR',
    label: 'Argentina (+54)',
    prefix: '54',
    value: 'argentina',
  },
  {
    code: 'BR',
    label: 'Brazil (+55)',
    prefix: '55',
    value: 'brazil',
  },
  {
    code: 'IM',
    label: 'Isle of Man (+44-1624)',
    prefix: '44-1624',
    value: 'isleOfMan',
  },
  // and so on…
];

…and consider that the actual list is alot longer. The component that handles it all could look something like this:

const formatBoxLabel = (value) => `(+${value.prefix})`;

export const Foo = () => {
  const [selected, setSelected] = React.useState('');
  const selectedOption = selected ? formatBoxLabel(selected) : 'Please select a country';

  return (
    <Listbox value={selected} onChange={setSelected}>
      <Listbox.Button>{selectedOption}</Listbox.Button>
      <Listbox.Options>
        {countries.map(country => (
          <Listbox.Option key={country.code} value={country}>
            {country.label}
          </Listbox.Option>
        ))}
      </Listbox.Options>
    </Listbox>
  )
}

The idea being that each option would be shown like
Argentina (+54)
Brazil (+55)
Isle of Man (+44-1624)

…but the selected value would only contain the actual country code: (+55) (for brevity).

Now for the final criteria: since people think about filtering numbers differently, it’d be nice if typing either br or 55 would focus the option for Brazil. But because of how it works right now, only br will work – typing 55 won’t do anything, since it does not match the start of any of the labels.

Ideally it’d be nice if there was some way of telling Listbox to look at some of the keys for each value (other than what’s printed in the label). Something like ”Hey Listbox. When using the keyboard to find an option to focus , consider the code, prefix and value keys for each option, and pick whatever you find first”. But I don’t think there is anything like that at all right?

I guess this might be doable with ref’s and eventlisteners in some way, but it feels like it’d become messy fast. But perhaps its considered a bit too niche to be included?