Skip to content

Disabled button/trigger is missing disabled attribute during SSR #1843

Open
@OliverJAsh

Description

@OliverJAsh

Bug report

Current behavior

import { Menu } from '@base-ui-components/react/menu';
import { renderToString } from 'react-dom/server';

console.log(
  renderToString(
    <Menu.Root>
      <Menu.Trigger disabled={true}>Menu</Menu.Trigger>
      <Menu.Portal>
        <Menu.Positioner>
          <Menu.Popup>
            <Menu.Item>Add to Library</Menu.Item>
          </Menu.Popup>
        </Menu.Positioner>
      </Menu.Portal>
    </Menu.Root>
  )
);

Result: no disabled attribute, only data-disabled.

<button aria-haspopup="menu" tabindex="0" aria-expanded="false" id="«R0H1»" data-disabled="">Menu</button>

Expected behavior

Result: disabled attribute as well as data-disabled.

<button disabled aria-haspopup="menu" tabindex="0" aria-expanded="false" id="«R0H1»" data-disabled="">Menu</button>

Reproducible example

Base UI version

1.0.0-alpha.8

Which browser are you using?

Chrome

Which OS are you using?

Mac OS

Which assistive tech are you using (if applicable)?

Voiceover/JAWS etc.

Additional context

Provide any additional context that might help us identify the problem and find a solution.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething doesn't work

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions