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.

[snowystinger]

Update, we now have an Autocomplete component which should allow you to accomplish this more easily https://react-spectrum.adobe.com/react-aria/Autocomplete.html#autocomplete

[jimmynotjim]

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

[bigfoot31]

Click events are a complete mess in this library. Made a huge mistake using this library. Most react libraries look for 'onClick' events which are not available OR does not work for many components of the library. Was trying to incorporate 'downshift.js' by rendering the autocomplete options with either 'listbox + listboxitem' or just a list of 'button's. Nothing works. Ended up writing all custom code using divs.
Documentation of using popover with a custom trigger is also lacking.

For future readers: In the current state, not recommended to use this library at all.

[reidbarber]

Both issues you mentioned should be fixed in the next release:
#7542
#7662