[field] Fix autofocus in SSR environments

[mj12albert]

Demo: https://ytf734-3000.csb.app

Fixes #3172

• I have followed (at least) the PR section of the contributing guide.

[pkg-pr-new]

• base-ui-tanstack-start

• vite-css-base-ui-example

  pnpm add https://pkg.pr.new/mui/base-ui/@base-ui/react@3871
  

  pnpm add https://pkg.pr.new/mui/base-ui/@base-ui/utils@3871
  

commit: 85209bd

[mui-bot]

Bundle size report

Bundle	Parsed size	Gzip size
@base-ui/react	🔺+103B(+0.02%)	🔺+77B(+0.06%)

Details of bundle changes

---

Check out the code infra dashboard for more information about this PR.

[netlify]

✅ Deploy Preview for base-ui ready!

Name	Link
🔨 Latest commit	85209bd
🔍 Latest deploy log	https://app.netlify.com/projects/base-ui/deploys/697af6ce980fc50008ae73ee
😎 Deploy Preview	https://deploy-preview-3871--base-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[greptile-apps]

Greptile Overview

Greptile Summary

This PR adds SSR-safe autoFocus prop support to FieldControl by detecting when the browser's native autofocus has already focused the input element and synchronizing the field's internal focused state accordingly.

Key changes:

• Added autoFocus prop handling (defaults to false)
• Created new inputRef to track the input element
• Added useIsoLayoutEffect hook that checks if the input is the active element after browser autofocus and syncs fieldState.focused
• Merged inputRef with existing forwardedRef to enable focus detection
• Properly uses useIsoLayoutEffect which becomes a noop in SSR environments, preventing errors when document is unavailable
• Follows existing codebase patterns for activeElement(ownerDocument(...)) usage seen in other components

The implementation correctly handles SSR hydration where the browser's native autofocus occurs before React event handlers are attached.

Confidence Score: 5/5

• This PR is safe to merge with minimal risk
• The implementation follows established patterns in the codebase for handling autofocus and SSR. It uses useIsoLayoutEffect which is SSR-safe (becomes noop when document is undefined), properly handles null cases in the activeElement check, and correctly merges multiple refs. The logic is straightforward and defensive.
• No files require special attention

Important Files Changed

Filename	Overview
packages/react/src/field/control/FieldControl.tsx	Adds autofocus support with SSR-safe focus state synchronization using useIsoLayoutEffect and activeElement check