[combobox] Disabled Trigger omits native disabled during SSR and causes a hydration mismatch
- Dominant language
- TypeScript
- Stars
- 10.9k
- Forks
- 543
- Avg merge
- 1d 20h
- Merged PRs (30d)
- 101
Description
# Bug report
## Current behavior
A disabled `Combobox.Trigger` produces different native button attributes during SSR and hydration.
The component receives `disabled={true}` during both SSR and the first client render. However, the server HTML contains:
```html
Open
```
while the first client render expects:
```html
Open
```
React reports:
```diff
```
The full warning is:
```text
A tree hydrated but some attributes of the server rendered HTML
didn't match the client properties. This won't be patched up.
```
## Expected behavior
When `disabled={true}`, `Combobox.Trigger` should produce the same native `disabled` attribute during SSR and the first client render.
Hydrating the component should not produce a warning.
## Reproducible example
This is the minimal component that reproduces the problem in my TanStack Start SSR application:
```tsx
import { Combobox } from "@base-ui/react/combobox";
export function Example() {
return (
Open
);
}
```
I do not currently have a hosted reproduction, but I can create one if the issue cannot be reproduced from this example.
## Base UI version
v1.8.0
## Which browser are you using?
Chrome
## Which OS are you using?
Linux
## Which assistive tech are you using (if applicable)?
This was created with the help of Microsoft Copilot (GPT 5.6 Think deeper)
## Additional context
Relevant versions:
```text
react: 19.2.5
react-dom: 19.2.5
@base-ui/react: 1.8.0
@tanstack/react-start: 1.168.25
```
I confirmed that the logical state is the same during SSR and the first client render:
```text
SSR:
disabled = true
First client render:
disabled = true
```
I also tested the following:
- Passing `disabled` directly to `Combobox.Root`
- Passing `disabled` to both `Combobox.Root` and `Combobox.Trigger`
- Removing the custom `render` prop
- Rendering the native Base UI trigger directly
- Removing all items, values, controlled state, and API-query logic
The same mismatch still occurs with the minimal Combobox.
The Base UI state attribute `data-disabled=""` is present in both cases. Only the native `disabled` attribute differs.
Could this be an SSR issue in `Combobox.Trigger` or Base UI's internal native-button handling?
Contributor guide
Research direction
Start with the minimal SSR example using Combobox.Root and Combobox.Trigger, then inspect the Combobox.Trigger native-button handling described in the report. Reproduce the server and first client renders with disabled={true}; done means both contain the native disabled attribute and hydration produces no warning.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 68/100