Skip to content

fix: resolve pointer event blocking in LoadMoreFooter #3883

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
chronark merged 2 commits into from
Sep 1, 2025
Merged

fix: resolve pointer event blocking in LoadMoreFooter #3883

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
80f00c2
fix(virtual-table): resolve pointer event blocking in LoadMoreFooter
perkinsjr Aug 29, 2025
97c65c2
Improve a11y
perkinsjr Aug 29, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 7 additions & 3 deletions apps/dashboard/components/virtual-table/components/loading-indicator.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,14 +83,18 @@ export const LoadMoreFooter = ({

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"
Copy link
Contributor

@coderabbitai coderabbitai bot Aug 29, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Suggested change
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.

style={{
opacity: shouldShow ? 1 : 0,
pointerEvents: shouldShow ? "auto" : "none",
animation: isOpen ? "slideUpFromBottom 0.3s ease-out" : undefined,
}}
>
<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">
<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}
>
Comment on lines +92 to +97
Copy link
Contributor

@coderabbitai coderabbitai bot Aug 29, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

<div className="flex flex-col w-full">
{/* Header content */}
{headerContent && (
Expand Down