Combobox: allow button focus when input is inside the combobox

[harrygr]

I'm trying to build a multi-select using the combobox.

I want to display the selected values inside the button and have the input inside the combobox so it's not visible unless the combobox is open.

I've made a codesandbox that mostly achieves this behaviour: https://codesandbox.io/s/fervent-tess-i56x30

It works ok expect the button cannot be focussed as part of normal form keyboard navigation. The only way to reveal the combobox is to click the button with the mouse. Usually this is OK as the input can accept focus.

Is there any way to make the button focussable when the input is not rendered? The Combobox.Button ignores the tabIndex prop

---

As an aside, the reason I'm trying this approach is because I haven't managed to find a way to build a multi-select combobox that works properly for showing the selected values. The problem is that value in the input box should usually be the search term, but we also want to display the selected values somehow, and there's no obvious way to keep combobox's input displaying the correct value. This isn't usually a problem for single-select as the search term inevitably becomes the selected value. But for multi-select you often search for an item, select it, then search for a different item. Managing this interaction is a lot harder.

I'd love to see a working example of a multi-select combobox if anyone has one.

[harrygr]

I've managed to hack the tabindex using a ref:

  const comboButton = React.useRef<HTMLButtonElement | null>(null);

  React.useEffect(() => {
    if (comboButton.current) {
      comboButton.current.setAttribute("tabIndex", "auto");
    }
  }, [comboButton]);

<Combobox.Button ref={comboButton}>Select items</Combobox.Button>

But it's pretty nasty. It'd be great if the component just accepted a tabindex override.

[ahamill85]

Is there a reason the combobox button tabindex is set to 0? Is this an accessibility consideration?

[buzzb0x]

Another option is to override the attribute by passing a custom component in the as prop

<Combobox.Button
  as={forwardRef(function AccessibleButton(
    props: ComponentProps<"button">,
    ref: Ref<HTMLButtonElement>
  ) {
    return <button {...props} tabIndex={0} ref={ref} />;
  })}
>
  {/* your code here… */}
</Combobox.Button>;
``` /