Combobox example from the docs not working?

[Kadrian]

I'm just trying to get a simple ComboBox component to work. So I've built my ComboBoxField component looking at the basic example from the docs

And when selecting an item from the listbox, the item gets the data-selected state, shows up correctly in the listbox, but:

• the Input is not filtering the items when entering text, simply "all" items are showing in the listbox
• the selected value is not getting set in the Input

Any ideas what's the matter with my implementation?

I'd expect that the ComboBox sets the correct props to Input using the internal react-aria InputContext, no? Why would that not be happening?

      <ComboBoxField>
        {items.map((item) => (
          <ComboBoxItem key={item} id={item}>
            {item}
          </ComboBoxItem>
        ))}
      </ComboBoxField>

import {
  ComboBox as ComboBoxPrimitive,
  ComboBoxProps,
  Input,
  Label,
  ListBox,
  ListBoxItem,
  ListBoxItemProps,
  Popover,
} from "react-aria-components";
import { cva } from "class-variance-authority";
import { FieldText } from "./FieldText";
import { ChevronDown, Check } from "lucide-react";
import { Button } from "./Button"; // is built on top of a react-aria-components Button

export const ComboBoxField = <T extends { id: string; name: string }>({
  label,
  description,
  errorMessage,
  "aria-label": ariaLabel,
  children,
  ...props
}: ComboBoxProps<T> & {
  label?: string;
  description?: string;
  errorMessage?: string;
  "aria-label"?: string;
}) => {
  return (
    <ComboBoxPrimitive
      {...props}
      menuTrigger="focus"
      shouldFocusWrap
      aria-label={label || ariaLabel || "Combobox"}
    >
      {label && <Label className="text-sm font-medium">{label}</Label>}
      <div className="relative [&>button]:absolute [&>button]:right-0 [&>button]:top-0">
        <Input />
        <Button intent="ghost" size="sm">
          <ChevronDown className="size-4" />
        </Button>
      </div>
      {description && <FieldText>{description}</FieldText>}
      {errorMessage && <FieldText intent="error">{errorMessage}</FieldText>}
      <Popover className="bg-background rounded-md shadow p-2 w-[--trigger-width]">
        <ListBox
          className="max-h-[300px] w-full overflow-auto outline-none"
          selectionMode="single"
        >
          {children}
        </ListBox>
      </Popover>
    </ComboBoxPrimitive>
  );
};

const comboBoxItemStyles = cva([
  "flex",
  "items-center",
  "gap-3",
  "w-full",
  "text-sm",
  "px-4",
  "py-2",
  "outline-none",
  "cursor-pointer",
  "rounded-md",
  "transition-colors",
  "data-[selected]:font-semibold",
  "data-[focused]:bg-secondary",
  "data-[focused]:text-secondary-foreground",
])();

export const ComboBoxItem = ({ children, ...props }: ListBoxItemProps) => {
  return (
    <ListBoxItem {...props} className={comboBoxItemStyles}>
      {({ isSelected }) => (
        <>
          {children}
          {isSelected && <Check className="size-4" />}
        </>
      )}
    </ListBoxItem>
  );
};

[Kadrian]

I found out why: I forgot to add textValue to <ListBoxItem>. Got a warning on the console about it.

=> But this means that the docs are definitely out of date – what can we do about it? Who to tag?

[reidbarber]

A textValue is only needed if you have non-text nodes inside the item. Those docs examples don't, so they aren't necessary in the examples there: https://react-spectrum.adobe.com/react-aria/ComboBox.html#listboxitem

[Kadrian]

Well but from my code above, where did I have non-text nodes? items was a string array: items: string[]

[snowystinger]

It's the children passed to ListBoxItem. So in your case it's

    <ListBoxItem {...props} className={comboBoxItemStyles}>
      {({ isSelected }) => (
        <>
          {children}
          {isSelected && <Check className="size-4" />}
        </>
      )}
    </ListBoxItem>

vs

    <ListBoxItem {...props} className={comboBoxItemStyles}>string here</ListBoxItem>