[field] Focus state inaccurate on initial render when `Field.Control` has `autoFocus`

[kenanyusuf]

Bug report

Current behavior

I am using the Field component and passing the autoFocus prop to the Field.Control. state.focused is false and data-focused is not present on the initial render.

Expected behavior

I expected state.focused to be true and data-focused to be present on the field elements.

Reproducible example

https://codesandbox.io/p/devbox/ts8md6

Steps to reproduce:

• Open the preview in a new tab https://ts8md6-3000.csb.app/
• Notice the input is focused, but the focus outline is not present

How it looks:

How it should look:

Base UI version

v1.0.0-beta.4

Which browser are you using?

Chrome

Which OS are you using?

Mac OS

Additional context

I suspect this may be related to server-side rendering. The reproduction of the issue is using SSR and Next.js, whereas this version is client-rendered and working as expected.

[mj12albert]

I suspect this may be related to server-side rendering

I think you're right, related issue: #1525

[mj12albert]

RA has the same issue:

• Next.js https://codesandbox.io/p/devbox/6r2mw9
• plain Vite https://stackblitz.com/edit/vitejs-vite-wb3yzuyc?file=src%2FApp.tsx