fix: product image zoom requires multiple clicks to dismiss#16946
Draft
posthog[bot] wants to merge 1 commit into
Draft
fix: product image zoom requires multiple clicks to dismiss#16946posthog[bot] wants to merge 1 commit into
posthog[bot] wants to merge 1 commit into
Conversation
The outer <button> around <ZoomImage> in ProductImage caught the dismiss click from react-medium-image-zoom and immediately re-opened the zoom, forcing users to click again to close. Replace it with a plain <div> since ZoomImage already renders its own clickable trigger. Generated-By: PostHog Code Task-Id: 2744d014-24ed-4e55-8304-58a5b1c1dc50
Contributor
Deploy preview
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Changes
ProductImageinsrc/components/Products/Slides/Image.tsxwrapped<ZoomImage>(areact-medium-image-zoominstance) inside a<button>. When a user clicked to dismiss the zoom overlay,react-medium-image-zoomclosed it — but the same click bubbled up to the outer<button>, which immediately re-opened the zoom. Users had to click multiple times to actually close the overlay.PostHog session
019e4776-70ae-7628-9805-40a7f5a806cb(segment 00:35–01:36 on/surveys) captured this as a$dead_clickplus two$rageclickevents while the user tried to dismiss a feature-slide image.This replaces the redundant
<button>wrapper with a<div>, preserving theflex items-center justify-center w-fullstyling.ZoomImagealready renders its own clickable trigger, so no interactivity is lost.Affects every product slide page (surveys, feature flags, etc.) via
FeaturesSlide,FeaturesSplit,FeaturesSplitWithImage, andFeaturesGrid.Checklist
vercel.json(n/a)Created with PostHog Code