Skip to content
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.

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

fix: zoom inside dialog that has 'click outside' handler #763

Merged
merged 3 commits into from
Nov 12, 2024

Conversation

rpearce
Copy link
Owner

@rpearce rpearce commented Nov 12, 2024

Description

Closes #746 by stopping event bubbling in situations where we click or keydown on the zoom modal. This should prevent a parent modal (or anything) with a "click outside" handler from thinking that it should close when we are merely trying to unzoom the zoomed image modal.

Testing

  1. Clone this repo
  2. Checkout this branch
  3. Run npm i && npm start
  4. Go to http://localhost:6006/?path=/story/img--zoom-image-from-inside-dialog
  5. Click "Open Modal"
  6. Click on the image
  7. Click again on the image to close it. This should not close the original modal!
  8. Open it again, and click on the close button in the top right. Same test as above.
  9. Open it again, and use the enter or spacebar on the close button in the top right. Same test as above.

@rpearce rpearce added the bug label Nov 12, 2024
@rpearce rpearce self-assigned this Nov 12, 2024
@rpearce rpearce force-pushed the fix/zoom-inside-dialog-with-click-outside branch from c550ba7 to 658a865 Compare November 12, 2024 02:34
@rpearce rpearce merged commit d8958f8 into main Nov 12, 2024
2 checks passed
@rpearce rpearce deleted the fix/zoom-inside-dialog-with-click-outside branch November 12, 2024 02:52
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

preventDefault for the un-zoom button
1 participant