fix: prevent hover events from bleeding through Code Index Config popover #7705
Conversation
…over - Added explicit pointer-events handling to PopoverContent component - Increased z-index from z-50 to z-[100] for better layering - Added onPointerDownOutside prevention to stop click-through events - Added inline style for pointer-events auto to ensure proper event blocking Fixes #7703
dosubot
bot
added
size:XS
![roomote[bot]](https://avatars.githubusercontent.com/in/1546624?s=60&v=4){kind=small}
| container={portalContainer}> | ||
| container={portalContainer} | ||
| onPointerDownOutside={(e) => e.preventDefault()} | ||
| style={{ pointerEvents: "auto" }}> |
There was a problem hiding this comment.
Is setting pointerEvents: "auto" here still necessary since it's now the default in the base PopoverContent component? We might be able to remove this explicit setting to reduce redundancy.
| sideOffset={sideOffset} | ||
| className={cn( | ||
| "z-50 w-72 rounded-xs p-4 shadow-xs outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", | ||
| "z-[100] w-72 rounded-xs p-4 shadow-xs outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", |
There was a problem hiding this comment.
The z-index change from z-50 to z-[100] affects all popovers across the application. Have we verified this doesn't create any z-index conflicts with other UI elements like modals or tooltips? I found 15+ components using PopoverContent that will inherit this change.
| "text-popover-foreground", | ||
| className, | ||
| )} | ||
| style={{ ...style, pointerEvents: "auto" }} |
There was a problem hiding this comment.
Consider adding a comment here explaining why pointerEvents: "auto" is set as the default. This would help future developers understand that this is intentional to prevent event bleed-through issues:
hannesrudolph
added
the
Issue/PR - Triage
|
Closing: current fix does not solve the issue. Terminal component buttons (copy and language dropdown) remain visible/interactive when the Code Index Config popover is open. Ensure a blocking overlay and correct z-index/pointer-events so background controls are inert while the popover is open. |
Description
This PR fixes an issue where hover events from elements behind the Code Index Config popover were bleeding through, causing tooltips and hover effects to appear on top of the popover.
Problem
When the Code Index Config panel is open, hovering over the area where command blocks exist behind the popover would cause their tooltips to appear on top of the popover, creating a confusing user experience.
Solution
The fix involves two key changes:
Enhanced PopoverContent component (
webview-ui/src/components/ui/popover.tsx):styleproppointerEvents: 'auto'as default to ensure proper event handlingz-50toz-[100]for better layeringUpdated CodeIndexPopover usage (
webview-ui/src/components/chat/CodeIndexPopover.tsx):onPointerDownOutsidehandler to prevent unintended click-throughpointerEvents: 'auto'to capture all hover eventsTesting
Related Issue
Fixes #7703
Screenshots
The issue was that hover tooltips from command blocks would appear over the Code Index Config panel. This fix ensures the popover properly blocks all pointer events from elements behind it.
Important
Fixes hover event bleed-through in
CodeIndexPopoverby adjusting pointer events and z-index inPopoverContent.CodeIndexPopover.tsxby addingonPointerDownOutsideto prevent click-through.pointerEvents: 'auto'inPopoverContentinpopover.tsxto capture hover events.PopoverContentfromz-50toz-[100]for proper layering.PopoverContentinpopover.tsxnow supports custom styles viastyleprop.CodeIndexPopoverinCodeIndexPopover.tsxexplicitly setspointerEventsand handles outside pointer events.This description was created by
for 734bbc8. You can customize this summary. It will automatically update as commits are pushed.