Is there a recommended way to render an unselectable static list box item that only performs an action?

[markjaniczak]

I have a use case that looks something like this:

const myItems = [
  {
    id: "1",
    label: "Item 1",
  },
];

function MySelect({
  onCreate,
  ...props
}: SelectProps & {
  onCreate?: () => void;
}) {
  return (
    <Select {...props}>
      <Button>
        <SelectValue />
      </Button>
      <Popover>
        <Autocomplete>
          <SearchField>
            <Input />
          </SearchField>
          <ListBox>
            <Collection items={myItems}>
              {(item) => (
                <ListBoxItem textValue={item.label}>{item.label}</ListBoxItem>
              )}
            </Collection>
            <ListBoxItem id="__CREATE__" onPress={onCreate}>Create new</ListBoxItem>
          </ListBox>
        </Autocomplete>
      </Popover>
    </Select>
  );
}

The items are typically a dynamic list that comes from an API. The create option is used by consumers to display a form to create a new option with the same API. I'm finding a couple of problems with this:

1. I have to manually prevent the selection of the create item. There's no disableSelection prop or the ability to prevent a change event on the item.
2. Due to memoization in the select component, I cannot render the filter text directly in the list box item without extracting it to a new component and tapping into the autocomplete state context.

Is there a better approach that can be taken here or should I use a different kind of component?

[snowystinger]

I think you'd be better served with a ComboBox. See this example https://react-aria.adobe.com/ComboBox#item-actions