Input + ListBox for custom autocomplete component

[apucacao]

Hi all,

I'm building a custom component that composes an Input with a ListBox in a similar fashion to the ComboBox, minus the built-in popover part, that supports all the selection modes. We're staying away from multi-select type UX ala react-select by displaying values in a TagGroup and selection driven by this autocomplete component in a popover (with a button trigger).

I had built a version of this that had a frustrating shortcoming: pressing the Up/Down arrows didn't move selection in the list. After a bit of research here I found this comment which set me on a path to try and compose an input and a list box with virtual focus.

The problem I'm running into is that I can't get any items to populate my collection.

The component is inspired by the RAC ComboBox implementation, including useComboBox, useComboBoxState, etc…

• my state is a combo of useListState + useControlledState
• my AutoCompleteListBox component then uses InputContext, ListBoxContext and ListStateContext

And I'm trying out something like this:

<AutoCompleteListBox autoFocus selectionMode="multiple" items={items}>
  <Group>
    <Input
      onChange={(event) =>
        startTransition(() => {
          setFilterText(event.target.value);
        })
      }
    />
    <Icon name="search" size="small" />
  </Group>
  <ListBox<TagOption>>
    {(item) => (
      <ListBoxItem id={item.id} textValue={item.name}>
        <Text slot="label">
          <TextTruncator>{item.name}</TextTruncator>
        </Text>
      </ListBoxItem>
    )}
  </ListBox>
</AutoCompleteListBox>

The AutoCompleteListBox component itself looks like this:

function AutoCompleteListBox_<T extends object>(props: AutoCompleteListBoxProps<T>, ref: ForwardedRef<HTMLDivElement>) {
  const inputRef = useRef<HTMLInputElement>(null);
  const listBoxRef = useRef<HTMLDivElement>(null);

  const state = useAutoCompleteListBoxState({
    ...props,
    items: props.items,
    children: undefined,
  });

  // This hook combines `useSelectableCollection` and `useTextField` + custom keyboard handlers.
  const { inputProps, listBoxProps } = useAutoCompleteListBox(
    {
      ...props,
      inputRef,
      listBoxRef,
    },
    state,
  );

  const children = props.children !== null ? props.children : undefined;

  const DOMProps = filterDOMProps(props);
  delete DOMProps.id;

  return (
    <Provider
      values={[
        [InputContext, { ...inputProps, ref: inputRef }],
        [ListBoxContext, { ...listBoxProps, ref: listBoxRef }],
        [ListStateContext, state],
      ]}
    >
      <div {...DOMProps} ref={ref}>
        {children}
      </div>
    </Provider>
  );
}

And the relevant part of useComboBoxState looks like this:

const { collection, disabledKeys, selectionManager } = useListState({
  ...props,
  selectionBehavior: 'toggle',
  items: props.items ?? props.defaultItems,
});

Problem is the resulting collection is empty; I can tell that useListState is receiving the items I expected though .

One thing I've noticed is that ComboBox and Select render their ListBox twice, the first time along with something called a CollectionDocumentContext.

Is that the thing I'm missing? Because from the looks of it I can't export that from the package. But maybe I'm missing something else. Happy to share more of the code if that helps.

Update: I tried copying utils.tsx and Collection.tsx over from the react-aria-components package, and followed the example from ComboBoxby usinguseCollectionDocumentandHidden` and co. but the collection still ends up empty.

[snowystinger]

Would you be willing to share a codesandbox or stackblitz with your implementation? it'd be a lot easier to help with that. Otherwise it's hard to tell exactly what's been done.

[jimmynotjim]

@apucacao I'm currently headed down this same path. Were you ever able to resolve the issue?