fix(hover-card): avoid preventDefault in passive event listener #3748
+9
−1
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
🐛 Bug Description
While investigating shadcn-ui/ui#8777
(Hover Card Touch Error), I found that the root cause originates from @radix-ui/react-hover-card rather than shadcn/ui.
The issue occurs when touching a HoverCardTrigger on mobile or in Chrome’s mobile emulator.
Console shows:
Unable to preventDefault inside passive event listener
🔍 Root Cause
@radix-ui/react-hover-card currently calls event.preventDefault() unconditionally inside the trigger’s onTouchStart handler.
In React 19, touch event listeners are now passive by default, so calling preventDefault() throws this warning.
File: packages/react/hover-card/src/HoverCard.tsx
Lines: ~93–95
💡 Fix
Guard the call to only execute when the event is cancelable:
✅ Impact
Removes noisy console warnings in React 19 + Chrome mobile emulation
Maintains existing behavior for React 18 and older
No behavior change for desktop or mouse interactions
🧪 Verification
Tested locally in:
React: 19.2.0
Next.js: 16.0.1
Chrome: 142.0.7444.60 (mobile emulation)
System: macOS (Apple M4)
Result:
✅ No warning message
✅ HoverCard still opens correctly on touch interaction
🔗 Related Issue
Upstream Report: shadcn-ui/ui#8777
Root cause: Radix UI HoverCard
🧱 Summary
Fixes Unable to preventDefault inside passive event listener by checking event.cancelable before calling preventDefault() in HoverCardTrigger