fix: resolve pointer event blocking in LoadMoreFooter#3883
Conversation
The LoadMoreFooter component was blocking user interactions with table rows due to its full-width fixed positioning with z-index overlay. Changes: - Add pointer-events-none to outer container to allow clicks through transparent areas - Add pointer-events-auto to inner content div to maintain footer interactivity - Remove redundant inline pointerEvents style This allows users to interact with table elements (three-dot menus, key IDs) that appear behind the footer while preserving all footer functionality.
perkinsjr
requested review from
chronark,
mcstepp and
ogzhanolguncu
as code owners
|
|
The latest updates on your projects. Learn more about Vercel for GitHub.
1 Skipped Deployment
|
📝 WalkthroughWalkthroughReplaces inline pointerEvents gating with CSS classes: outer wrapper uses Changes
Sequence Diagram(s)sequenceDiagram
actor User
participant Table as Virtual Table
participant Footer as LoadingIndicator
User->>Table: Click last row action
Table->>Footer: Footer rendered over table area
Note right of Footer #f0f9ff: Outer wrapper = pointer-events-none\nInner content = pointer-events-auto when visible
User->>Footer: Click passes through non-interactive overlay
Footer-->>Table: No interception for clicks on non-interactive area
Table-->>User: Row/action receives click
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Assessment against linked issues
Possibly related PRs
Suggested reviewers
✨ Finishing Touches
🧪 Generate unit tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
|
Thank you for following the naming conventions for pull request titles! 🙏 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (1)
apps/dashboard/components/virtual-table/components/loading-indicator.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{js,jsx,ts,tsx}: Use Biome for formatting and linting in TypeScript/JavaScript projects
Prefer named exports over default exports in TypeScript/JavaScript, except for Next.js pages
Files:
apps/dashboard/components/virtual-table/components/loading-indicator.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx}: Follow strict TypeScript configuration
Use Zod for runtime validation in TypeScript projects
Files:
apps/dashboard/components/virtual-table/components/loading-indicator.tsx
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: Test API / API Test Local
- GitHub Check: Test Go API Local / Test
- GitHub Check: Build / Build
- GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (1)
apps/dashboard/components/virtual-table/components/loading-indicator.tsx (1)
86-86: Good fix: parent passthrough via pointer-events-noneThis unblocks interactions behind the footer while keeping the inner content eligible to handle events. Looks correct for the reported issue.
apps/dashboard/components/virtual-table/components/loading-indicator.tsx
Outdated
Show resolved
Hide resolved
Improve the a11y by indicating when the it is hidden or not and don't hijack some other parts.
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (1)
apps/dashboard/components/virtual-table/components/loading-indicator.tsx (1)
92-97: Inner content gating + aria-hidden implemented correctlyConditional pointer-events and aria-hidden on the card make it interactive only when visible and inert otherwise. This matches the earlier suggestion.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (1)
apps/dashboard/components/virtual-table/components/loading-indicator.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{js,jsx,ts,tsx}: Use Biome for formatting and linting in TypeScript/JavaScript projects
Prefer named exports over default exports in TypeScript/JavaScript, except for Next.js pages
Files:
apps/dashboard/components/virtual-table/components/loading-indicator.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx}: Follow strict TypeScript configuration
Use Zod for runtime validation in TypeScript projects
Files:
apps/dashboard/components/virtual-table/components/loading-indicator.tsx
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: Test API / API Test Local
- GitHub Check: Test Go API Local / Test
- GitHub Check: Build / Build
- GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (2)
apps/dashboard/components/virtual-table/components/loading-indicator.tsx (2)
86-90: Fix validated: wrapper is click-throughAdding pointer-events-none on the fixed wrapper correctly unblocks interactions with underlying rows while allowing the child to opt-in. Looks good.
92-97: All LoadMoreFooter instances include an onLoadMore prop Verified via ripgrep that no usages omit onLoadMore.
| return ( | ||
| <div | ||
| className="fixed bottom-0 left-0 right-0 w-full items-center justify-center flex z-10 transition-all duration-300 ease-out" | ||
| className="fixed bottom-0 left-0 right-0 w-full items-center justify-center flex z-10 transition-all duration-300 ease-out pointer-events-none" |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
Nit: w-full is redundant with left-0 right-0
left-0 right-0 on a fixed element already spans full width.
- className="fixed bottom-0 left-0 right-0 w-full items-center justify-center flex z-10 transition-all duration-300 ease-out pointer-events-none"
+ className="fixed bottom-0 left-0 right-0 items-center justify-center flex z-10 transition-all duration-300 ease-out pointer-events-none"📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| className="fixed bottom-0 left-0 right-0 w-full items-center justify-center flex z-10 transition-all duration-300 ease-out pointer-events-none" | |
| className="fixed bottom-0 left-0 right-0 items-center justify-center flex z-10 transition-all duration-300 ease-out pointer-events-none" |
🤖 Prompt for AI Agents
In apps/dashboard/components/virtual-table/components/loading-indicator.tsx
around line 86, the class list on the fixed element includes both left-0 right-0
and w-full; remove the redundant w-full class so the element relies on left-0
and right-0 to span full width and keep the remaining utility classes unchanged.
| <div | ||
| className={`w-[740px] border bg-gray-1 dark:bg-black border-gray-6 min-h-[60px] flex items-center justify-center rounded-[10px] drop-shadow-lg shadow-sm mb-5 transition-all duration-200 hover:shadow-lg ${ | ||
| shouldShow ? "pointer-events-auto" : "pointer-events-none" | ||
| }`} | ||
| aria-hidden={!shouldShow} | ||
| > |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
Also prevent keyboard focus when hidden (use inert)
Hidden state can still be tabbed to. Add inert to fully disable focus/interaction when shouldShow is false.
<div
className={`w-[740px] border bg-gray-1 dark:bg-black border-gray-6 min-h-[60px] flex items-center justify-center rounded-[10px] drop-shadow-lg shadow-sm mb-5 transition-all duration-200 hover:shadow-lg ${
shouldShow ? "pointer-events-auto" : "pointer-events-none"
}`}
aria-hidden={!shouldShow}
+ inert={!shouldShow}
>Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In apps/dashboard/components/virtual-table/components/loading-indicator.tsx
around lines 92-97, the container is visually hidden but still reachable by
keyboard; add the inert attribute when shouldShow is false to fully disable
focus/interaction (e.g., inert={shouldShow ? undefined : ''} or inert={
!shouldShow }), keep aria-hidden in sync, and if TypeScript/React flags the
inert prop, either cast the prop or set a fallback by also applying
tabIndex={shouldShow ? 0 : -1} and/or role adjustments so the element is truly
inert when hidden.
chronark
deleted the
eng-1988-ui-table-footer-blocks-click-interaction
branch
3 participants
What does this PR do?
The LoadMoreFooter component was blocking user interactions with table rows due to its full-width fixed positioning with z-index overlay.
Changes:
This allows users to interact with table elements (three-dot menus, key IDs)
that appear behind the footer while preserving all footer functionality.
Fixes #3786
CleanShot.2025-08-29.at.08.45.21.mp4
Type of change
How should this be tested?
Checklist
Required
pnpm buildpnpm fmtconsole.logsgit pull origin mainSummary by CodeRabbit
Bug Fixes
Style