fix: resolving first focus on elements is incorrect

[luozz1994]

问题点： Modal弹框首次focus 不正确，第二次才恢复正常行为

解决办法：在 lockFocus 时判断一下当前元素是否已聚焦，如果没有的话进行聚焦操作，然后再继续执行 syncFocus 方法

fix ant-design/ant-design#56963

Summary by CodeRabbit

发布说明

• Bug修复
  • 改进了焦点锁定行为，使聚焦元素更快地获得焦点，同时防止意外的页面滚动。优化了焦点管理的响应速度和用户体验。

[vercel]

Someone is attempting to deploy a commit to the React Component Team on Vercel.

A member of the Team first needs to authorize it.

[gemini-code-assist]

Summary of Changes

Hello @luozz1994, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

此拉取请求旨在解决 Modal 组件在首次打开时焦点定位不准确的问题。通过在 lockFocus 机制中引入一个前置检查，确保目标元素在焦点同步之前已被正确聚焦，从而提升了用户体验和可访问性，避免了用户需要二次交互才能使焦点正常工作的困扰。

Highlights

• 解决 Modal 首次聚焦问题: 修复了 Modal 弹框首次聚焦不正确的问题，之前需要第二次操作才能正常聚焦。
• 改进 lockFocus 逻辑: 在 lockFocus 函数中，增加了对当前元素是否已聚焦的判断。如果未聚焦，则会先进行聚焦操作，然后再执行 syncFocus 方法，确保焦点行为的即时性和准确性。

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Changelog

• src/Dom/focus.ts
  • 在 lockFocus 函数中，添加了检查元素是否已聚焦的逻辑。
  • 如果元素未聚焦，则调用 element.focus({ preventScroll: true }) 进行强制聚焦。

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[coderabbitai]

演练

lockFocus 函数在注册 focusin 和 keydown 监听器后，现在会主动聚焦元素（如果它尚未获得焦点），使用 preventScroll 避免滚动。这为焦点锁定行为添加了初始聚焦强制路径，并在生命周期中更早地与锁定元素对齐聚焦。

变更

合并内容 / 文件	摘要
焦点锁定增强 src/Dom/focus.ts	在 lockFocus 函数中新增初始焦点强制逻辑，使用 preventScroll 参数防止页面滚动，确保锁定元素能够及时获得焦点。

评估代码审查工作量

🎯 2 (Simple) | ⏱️ ~8 分钟

可能相关的 PR

• feat: Support useLockFocus #712：两个 PR 都修改了 src/Dom/focus.ts 中的 lockFocus 函数，主要 PR 在前一个 PR 引入/扩展的 lockFocus 行为基础上添加了初始焦点强制逻辑。
• feat: add ignored element support for focus lock #727：两个 PR 都修改了 src/Dom/focus.ts 中的 lockFocus 函数，主要 PR 添加主动初始聚焦，而检索到的 PR 添加了按锁定映射的忽略元素和更新 lockFocus 签名/行为。
• Prevent scroll on focus for matched element #726：两个 PR 都修改了 src/Dom/focus.ts 中的焦点行为，在以编程方式聚焦元素时使用 preventScroll（一个在 syncFocus，另一个在 lockFocus）。

诗歌

🐰 焦点锚定在指尖，
初始聚焦不再晚，
preventScroll 轻轻摇篮，
模态框的稳定家园，
兔子为此欢呼雀跃！

🚥 Pre-merge checks | ✅ 6

✅ Passed checks (6 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	PR标题清晰指出了修复内容：解决元素初始焦点行为不正确的问题，与代码更改中添加初始焦点强制的目的相符。
Linked Issues check	✅ Passed	PR修改在lockFocus中添加了初始焦点强制逻辑，与issue #56963要求的修复Modal首次聚焦行为不一致问题的需求相符。
Out of Scope Changes check	✅ Passed	代码更改仅限于src/Dom/focus.ts中的lockFocus函数，添加了初始焦点强制逻辑，完全在linked issues范围内，无超出范围的修改。
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.
Merge Conflict Detection	✅ Passed	✅ No merge conflicts detected when merging into master

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

No actionable comments were generated in the recent review. 🎉

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[gemini-code-assist]

Code Review

你好，感谢你的贡献。这个修复通过在 lockFocus 时主动为元素设置焦点，解决了 Modal 弹窗首次焦点不正确的问题。这个改动确保了 syncFocus 在初始调用时能够正确记录最后一次聚焦的元素（lastFocusElement），从而使后续的焦点锁定逻辑能够正常工作。代码简洁且直接地解决了问题，注释也很清晰。做得很好！