Conversation
- Update @rc-component/util to 1.9.0 - Add ignoreElement to handle focus elements from Portal - Add onClose and onFocus type to DrawerPanelEvents - Add test case for focus handling with Portal Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning Rate limit exceeded
⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ✨ Finishing touches🧪 Generate unit tests (beta)
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. Comment |
Summary of ChangesHello @zombieJ, I'm Gemini Code Assist1! 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 significantly improves the focus management within the Drawer component, particularly when dealing with interactive elements rendered via React Portals. It ensures that elements outside the main DOM hierarchy of the drawer can be correctly focused without being inadvertently trapped by the drawer's focus lock. This enhancement provides a more robust and accessible user experience, alongside a routine update to a core utility library. Highlights
🧠 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
Activity
Using Gemini Code AssistThe 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
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 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
|
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #572 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 7 7
Lines 205 209 +4
Branches 75 75
=========================================
+ Hits 205 209 +4 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request updates @rc-component/util and leverages the new ignoreElement function from useLockFocus to correctly handle focus within Portals in the Drawer component. A new test case is added to verify this behavior. The changes look good and address the intended issue. I've added a few suggestions: one to prevent a potential runtime error by adding a type check, and a couple of others to improve the quality and robustness of the new test file.
| onFocus: (e: React.FocusEvent<HTMLDivElement>) => { | ||
| ignoreElement(e.target); | ||
| }, |
There was a problem hiding this comment.
The e.target of a focus event is of type EventTarget, which is not assignable to the HTMLElement type expected by ignoreElement. This could lead to runtime errors. It's safer to add a type check to ensure e.target is an HTMLElement before passing it to ignoreElement.
onFocus: (e: React.FocusEvent<HTMLDivElement>) => {
if (e.target instanceof HTMLElement) {
ignoreElement(e.target);
}
},
| const hooks = actual.useLockFocus(visible, ...rest); | ||
| const hooksArray = Array.isArray(hooks) ? hooks : [hooks]; | ||
| const proxyIgnoreElement = (ele: HTMLElement) => { | ||
| (globalThis as any).__ignoredElement = ele; | ||
| hooksArray[0](ele); | ||
| }; | ||
| return [proxyIgnoreElement, ...hooksArray.slice(1)] as ReturnType< | ||
| typeof actual.useLockFocus | ||
| >; |
There was a problem hiding this comment.
The implementation of the mocked useLockFocus can be simplified. Since @rc-component/util@1.9.0's useLockFocus is guaranteed to return a tuple [ignore, restore], you can use array destructuring directly instead of the defensive Array.isArray check. This makes the mock cleaner and easier to understand.
const [ignore, ...otherHooks] = actual.useLockFocus(visible, ...rest);
const proxyIgnoreElement = (ele: HTMLElement) => {
(globalThis as any).__ignoredElement = ele;
ignore(ele);
};
return [proxyIgnoreElement, ...otherHooks] as ReturnType<
typeof actual.useLockFocus
>;
| afterEach(() => { | ||
| jest.useRealTimers(); | ||
| cleanup(); | ||
| }); |
There was a problem hiding this comment.
The mock for useLockFocus sets properties on globalThis for testing purposes. It's a good practice to clean up these global properties in an afterEach block to avoid test pollution, where state from one test can leak into and affect subsequent tests.
afterEach(() => {
jest.useRealTimers();
cleanup();
delete (globalThis as any).__ignoredElement;
delete (globalThis as any).__useLockFocusVisible;
});
1 participant
ref ant-design/ant-design#56782