Skip to content

[Bug]: ComboBoxValue type mismatch — RefObject<HTMLDivElement | null> not assignable to AriaGroup's RefAttributes #169

@bdinsmor

Description

@bdinsmor

Bug description

`ComboBoxValue` in `src/components/base/select/combobox.tsx` declares `ref?: RefObject<HTMLDivElement | null>` in its props interface, but the latest version no longer forwards `ref` to `AriaGroup`. The unused prop still appears in the spread (`{...otherProps}`), and TypeScript flags the type mismatch because react-aria-components' `AriaGroup` expects `RefAttributes` (no `null` in the ref type).

Steps to reproduce

  1. Install combobox via the CLI: `npx untitledui@latest add combobox`
  2. Use a strict tsconfig (`"strict": true`)
  3. `tsc --noEmit`

Expected behavior

Type-check passes.

Actual behavior

```
src/components/ui/base/select/combobox.tsx(45,10): error TS2322: Type '{ children: ...; }' is not assignable to type 'RefAttributes'.
Types of property 'ref' are incompatible.
Type 'RefObject<HTMLDivElement | null> | undefined' is not assignable to type 'LegacyRef | undefined'.
```

Root cause

The interface still declares the `ref` prop:

```tsx
interface ComboBoxValueProps extends AriaGroupProps {
...
ref?: RefObject<HTMLDivElement | null>;
}
```

But the component destructure no longer pulls `ref` out, so it gets included in `{...otherProps}` spread to `AriaGroup`, which doesn't accept that ref type.

Suggested fix

Either:

  1. Destructure and forward the ref explicitly: `<AriaGroup ref={ref as RefObject} {...otherProps}`
  2. Or remove the unused `ref` prop from the interface entirely

Option 1 is what older versions of the file did. The latest install reverted that without removing the interface declaration.

Workaround

`git checkout` the file from before the latest CLI update.

Environment

  • `untitledui` CLI: latest
  • `react-aria-components`: ^1.17
  • TypeScript: 5.x with `"strict": true`

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions