fix(focus): add ignoreElement support and update deps

[zombieJ]

• Update @rc-component/util to 1.9.0
• Add ignoreElement to handle focus elements from Portal
• Remove console.log in Panel component
• Add test case for focus handling with Portal

fix ant-design/ant-design#56782

Summary by CodeRabbit

发布说明

• 新功能

  • 添加了门户（Portal）渲染的文档与可运行示例，演示在对话框中使用门户的用法。

• 错误修复

  • 改进了对话框内固定定位内容的焦点管理，提升焦点处理准确性。

• 测试

  • 新增覆盖门户内聚焦行为的自动化测试，验证焦点忽略逻辑。

• Chores

  • 更新了项目依赖的版本。

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
dialog	Ready	Preview, Comment	Feb 6, 2026 8:18am

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

此 PR 为 Dialog Panel 的焦点锁定行为加入对 portal 中元素的处理：调整 useLockFocus 的使用以获取并调用 ignoreElement，将其绑定到 Panel 容器的 onFocus，新增示例文档与测试覆盖，以及升级了 @rc-component/util 依赖版本。

Changes

Cohort / File(s)	Summary
文档与示例 docs/demo/with-portal.md, docs/examples/with-portal.tsx	新增 Portal 示例与文档，示例展示在 Dialog 内通过 ReactDOM.createPortal 渲染固定定位元素并包含输入框。
焦点管理实现 src/Dialog/Content/Panel.tsx	从 useLockFocus 解构出 ignoreElement 并将其绑定到容器 onFocus，在可见且 fixed-position 且未禁用 focusTrap 的情况下调用，以处理 portal 中元素的焦点。
依赖更新 package.json	将 @rc-component/util 依赖从 ^1.7.0 升级到 ^1.9.0。
测试 tests/focus.spec.tsx	增强 useLockFocus 的 mock，捕获并暴露被 ignore 的元素（globalThis.__ignoredElement），并新增测试验证当 portal 内输入获得焦点时会调用 ignoreElement。

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant PortalInput as Portal Input (document.body)
    participant Panel as Dialog Panel
    participant useLock as useLockFocus (hook)

    User->>PortalInput: click / focus
    PortalInput->>Panel: focus event bubbles to container
    Panel->>useLock: call ignoreElement(target)
    useLock-->>Panel: mark element as ignored
    Panel-->>PortalInput: allow keyboard input

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• chore: lock only when fixed #530：同样调整 Panel 中 useLockFocus 的使用与焦点锁定行为，代码级关联强。
• refactor: Use focus lock hooks instead of sentinel elements #529：进一步针对 Panel 的 focus-lock 逻辑变更并补充测试/示例，与本次改动有直接连续关系。
• fix: Update @rc-component/util dependency version #550：涉及将 @rc-component/util 升级以支持 useLockFocus，依赖变更相关。

Suggested reviewers

• thinkasany

Poem

🐰 门廊里有一盏灯，
焦点穿过门缝轻轻进，
兔子跳来按了个键，
输入框里字儿跳起舞，
小耳朵竖起笑开颜。

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	PR标题清晰准确地概括了主要变更：添加ignoreElement支持和更新依赖，与raw_summary中所有文件变更内容相符。
Linked Issues check	✅ Passed	代码变更完整地实现了linked issue #56782的目标：添加ignoreElement支持以处理Portal中的焦点元素，阻止掩码拦截keyboard事件。
Out of Scope Changes check	✅ Passed	所有变更均围绕焦点处理和Portal支持展开，完全对应#56782的需求，不存在超出范围的改动。
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ 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
• Commit unit tests in branch fix-focus

---

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]

Summary of Changes

Hello @zombieJ, 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!

This pull request enhances the focus management within dialog components, specifically addressing scenarios where interactive elements are rendered using React Portals. By updating a core utility and integrating an ignoreElement mechanism, the dialog's focus lock now correctly handles elements outside its direct DOM hierarchy, improving accessibility and user interaction for complex UI structures.

Highlights

• Dependency Update: The @rc-component/util dependency has been updated to version 1.9.0.
• Portal Focus Handling: Implemented ignoreElement support within the useLockFocus hook to correctly manage focus for elements rendered inside React Portals within a dialog, preventing unintended focus trapping.
• New Demo and Test Coverage: Added a new demo page (with-portal.md and with-portal.tsx) and a corresponding test case (focus.spec.tsx) to validate the improved portal focus handling.

🧠 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

• docs/demo/with-portal.md
  • Added a new markdown file to create a demo page for dialogs that include elements rendered via React Portals.
• docs/examples/with-portal.tsx
  • Added a new React component example demonstrating a Dialog containing a DivPortal with an input field, showcasing the new focus handling.
• package.json
  • Updated the @rc-component/util dependency from ^1.7.0 to ^1.9.0.
• src/Dialog/Content/Panel.tsx
  • Modified the useLockFocus hook call to destructure the ignoreElement function.
  • Added an onFocus event handler to the Panel component, which calls ignoreElement with the currently focused target to manage focus within portals.
• tests/focus.spec.tsx
  • Imported ReactDOM for portal-related testing.
  • Modified the mock for useLockFocus to capture and proxy the ignoreElement function, storing the ignored element for assertion.
  • Added a new test case to verify that ignoreElement is correctly invoked when an input element within a ReactDOM.createPortal is focused inside a Dialog.

Activity

• The pull request introduces a significant improvement to focus management within dialogs, particularly for elements rendered using React Portals.
• It includes a dependency update to leverage newer utility features.
• New documentation and example code have been added to demonstrate the updated functionality.
• A dedicated test case has been implemented to ensure the correct behavior of focus handling with portals.

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. ↩

[socket-security]

Warning

Review the following alerts detected in dependencies.

According to your organization's Security Policy, it is recommended to resolve "Warn" alerts. Learn more about Socket for GitHub.

Action	Severity	Alert  (click "▶" to expand/collapse)
Warn		Obfuscated code: npm safer-buffer is 94.0% likely obfuscated Confidence: 0.94 Location: Package overview From: ? → npm/@rc-component/np@1.0.4 → npm/safer-buffer@2.1.2 ℹ Read more on: This package | This alert | What is obfuscated code? Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev. Suggestion: Packages should not obfuscate their code. Consider not using packages with obfuscated code. Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/safer-buffer@2.1.2. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.

View full report

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 98.92%. Comparing base (167d88f) to head (89e1027).
⚠️ Report is 2 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master     #557      +/-   ##
==========================================
+ Coverage   98.90%   98.92%   +0.02%     
==========================================
  Files           8        8              
  Lines         182      186       +4     
  Branches       67       67              
==========================================
+ Hits          180      184       +4     
  Misses          2        2              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[gemini-code-assist]

Code Review

This pull request effectively resolves a focus-trapping issue when using elements within a Portal inside the Dialog. The approach of using the ignoreElement function from the updated @rc-component/util dependency is well-implemented through an onFocus event handler. The changes are supported by a new, relevant test case and a helpful demo page. The dependency update is also correctly handled. Overall, this is a solid fix.