Struggling with ComboBox

[JaredDeanFP]

Currently in the process of moving a projects code over from an 'internal' ui library to a project specific ui set. So far it's been going well, but I am really caught up on the ComboBox. I cannot for the life of me figure out what the deal is with this component, it seems like I am having issues at every turn.

Questions if anyone has answers:

1. Is it possible to use Select instead of ComboBox? I want the searchable/autocomplete but ComboBox seems to lack multi-select.
2. In the old component, tabbing to the Input and then pressing tab again would open it, and pressing tab again would enter the popover. Based on what I am reading, this appears to be bad from an accessibility standpoint. That said, people have been using this tool for 5 years and have muscle memory. Is there an easy way to preserve this tab functionality?
3. Currently, setting the defaultSelectedKey is working but is visually not showing the selectedKey. Any ideas why?

4. Is there an easy way to translate the solution to this issue to react-aria-components? Or should I just transition to useComboBox?
5. Ensure popover closes when focus is elsewhere?

All help/suggestions is appreciated, thank you.

import React from 'react';
import { ComboBox, ListBox, Key } from 'react-aria-components';
import { useListData } from 'react-stately';
import AMPSelectPopover from '@/amp-ui/AMPDynamicSelect/AMPSelectPopover';
import AMPSelectItem from '@/amp-ui/AMPDynamicSelect/AMPSelectItem';
import AMPLabel from '@/amp-ui/AMPLabel';
import AMPInput from '@/amp-ui/AMPInput';
import { MagnifyingGlassIcon } from '@radix-ui/react-icons';

type DynamicOptions<
  TPropertyName extends string,
  TPropertyID extends string
> = Record<TPropertyName | TPropertyID, string>;

interface AMPDynamicSelectProps<
  TPropertyName extends string,
  TPropertyID extends string
> {
  label: string;
  options: DynamicOptions<TPropertyName, TPropertyID>[];
  propertyName: TPropertyName;
  propertyID: TPropertyID;
  selectedItem?: DynamicOptions<
    TPropertyName,
    TPropertyID
  >[TPropertyID];
  onChange?: (key: string) => any;
  onSelect?: (
    item: DynamicOptions<TPropertyName, TPropertyID>
  ) => any;
  disabled?: boolean;
  'aria-label'?: string;
}

/**
 * @description Select for a dynamic list of items
 *
 * @link https://react-spectrum.adobe.com/react-aria/ComboBox.html
 */
export function AMPDynamicSearch<
  TPropertyName extends string,
  TPropertyID extends string
>({
  label,
  options,
  propertyName,
  propertyID,
  selectedItem,
  onChange,
  onSelect,
  disabled,
  ...props
}: AMPDynamicSelectProps<TPropertyName, TPropertyID>) {
  const list = useListData({
    initialItems: options,
    getKey: (item) => item[propertyID],
    initialSelectedKeys: selectedItem ? [selectedItem] : [],
    filter: (item, filterText) =>
      filterText === '' ||
      item[propertyName]
        .toLowerCase()
        .includes(filterText.toLowerCase())
  });

  let onSelectionChange = (key: Key) => {
    const item = list.getItem(key);
    let itemText = item ? item[propertyName] : '';
    list.setSelectedKeys(new Set([key]));
    list.setFilterText(itemText);

    onSelect && onSelect(item);
    onChange && onChange(item[propertyID]);
  };

  let onInputChange = (value: string): void => {
    // Clear key if user deletes all text in the field
    if (value === '') {
      list.setSelectedKeys(new Set([]));
    }
    list.setFilterText(value);
  };

  return (
    <ComboBox<DynamicOptions<TPropertyName, TPropertyID>>
      className='relative w-full'
      onSelectionChange={onSelectionChange}
      onInputChange={onInputChange}
      inputValue={list.filterText}
      items={list.items}
      defaultSelectedKey={selectedItem}
      shouldFocusWrap={true}
      menuTrigger='input'
      isDisabled={disabled}
      aria-label={props['aria-label'] || label || undefined}
    >
      <AMPLabel className='text-muted-foreground text-sm antialiased inline-flex items-center align-middle absolute -mt-6'>
        <span className='flex items-center'>{label}</span>
      </AMPLabel>

      <AMPInput attachLeft={<MagnifyingGlassIcon />} />

      <AMPSelectPopover>
        <span className='absolute text-xs text-muted-foreground right-0 mr-2 z-10'>
          {list.items.length} results
        </span>
        <ListBox<
          DynamicOptions<TPropertyName, TPropertyID>
        > className='p-1 overflow-y-auto max-h-40'>
          {(item) => (
            <AMPSelectItem
              key={item[propertyID]}
              id={item[propertyID]}
              textValue={item[propertyName]}
              className='relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[focused]:bg-accent data-[focused]:text-accent-foreground data-[disabled]:opacity-50'
            >
              {item[propertyName]}
            </AMPSelectItem>
          )}
        </ListBox>
      </AMPSelectPopover>
    </ComboBox>
  );
}

[snowystinger]

Thanks for the discussion:

1. Multiselect combobox is not supported, see Multiple selection support for useComboBox #2140 and Multi select option in useComboBox hook #2162 The Select component also doesn't not support multiselect for the same reasons. Combobox though would be the best way to go about selecting out of a large data set, and combined with the TagGroup, that is our recommendation.

2. Tab moves keyboard users between controls. We won't be supporting it as a trigger to open the dropdown. See https://www.w3.org/WAI/ARIA/apg/patterns/combobox/ for the pattern we implement. You may find that auto opening the dropdown on input focus to be a more acceptable behavior though, and it would reduce the keystrokes by 1 https://react-spectrum.adobe.com/react-aria/ComboBox.html#menu-trigger-behavior

3. I see it, looks like a bug https://react-spectrum.adobe.com/react-aria/ComboBox.html#value

4. Seems like a reasonable request. Did you try with autoFocus https://react-spectrum.adobe.com/react-aria/ComboBox.html#listbox ?

5. Can you provide an example in Stackblitz or codesandbox? I'm not quite sure what you mean.

[JaredDeanFP]

Thank you for the reply!

1. Do you know of any examples for ComboBox and TagGroup being used together? Wondering how to best handle a user accidentally selecting an item and needing to delete it quickly.
2. That may be what I end up doing
3. I ripped out the useListData portion of my code which seems to have fixed it. Sadly I then need to reimplement the filter to show the number of results (see stackblitz on number 5). If you know of a better solution I am all ears.
4. autoFocus seems to be what I would want, but it doesn't appear to work consistently. If I set the ComboBox to open on focus then it doesn't work. If I press space (there are options with a space) then it doesn't work. If there is a prefilled value, it doesn't work. Maybe bugs? Maybe I'm doing it wrong.
5. I haven't used these tools before and a lot of this data is dependent upon a bunch of other stuff so sorry for the incompleteness of it: stackblitz You can see that when you get the dropdown to appear (press down arrow or type something) it doesn't vanish when you click somewhere else.

[LFDanLu]

As for 4, I would avoid trying to autofocus any of the items in the dropdown without first verifying that NVDA doesn't have an issue with announcing the input field's text edits as the user types. If NVDA no longer has that issue, the best place to implement that would be in the hooks themselves, I don't think autoFocus on the ListBox will work here since it is typically used for initial render.

I'm not exactly sure what is happening for number 5, but if you add another input element as a sibling it closes the popover when clicking on it. Will have to compare between the docs version and this implementation since it works in the docs

[JaredDeanFP]

I really only want an autoFocus when one result remains, it's a bit silly (in my opinion) that you can type exactly what you want and for it to be valid just to hit enter and the input be cleared. Maybe there is a different solution than an autoFocus?

It does look like the autoclose works when I add an invisible button. That is interesting

[LFDanLu]

I think the ideal solution would be to change https://github.com/adobe/react-spectrum/blame/3db98d2d378f977a88d94e9f2501feca8ef8ce51/packages/%40react-stately/combobox/src/useComboBoxState.ts#L222 to not clear the focused key when the input is typed in and then I think autoFocus would work, but this would need to not break NVDA's value announcement. If that change did work then it would enable the behavior you are looking for and would emulate experiences like the the Chrome address bar more closely.