Skip to content

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

Closed

Description

@LeonHellqvist

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:

<button type="button" data-disabled="">Open</button>

while the first client render expects:

<button type="button" data-disabled="" disabled>Open</button>

React reports:

<button
  type="button"
  data-disabled=""
+ disabled={true}
- disabled={null}
>

The full warning is:

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:

import { Combobox } from "@base-ui/react/combobox";

export function Example() {
  return (
    <Combobox.Root disabled>
      <Combobox.Trigger>Open</Combobox.Trigger>
    </Combobox.Root>
  );
}

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:

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:

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?

Activity

  1. atomiks commented on Sep 22, 2026

    @atomiks
    Contributor

    I tried your example in TanStack Start with the same versions, but couldn’t reproduce it (the server HTML includes disabled and hydration works without warnings). Could you share a small reproduction with your lockfile and Vite config?

  2. github-actions commented on Sep 29, 2026

    @github-actions

    Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions