mui / mui/base-ui

[combobox] Disabled Trigger omits native disabled during SSR and causes a hydration mismatch

Open
#5,726 0 comments 0 reactions 0 assignees View on GitHub
component: combobox status: waiting for maintainer
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.