Modal: Ensure drag from within Modal does not accidentally dismiss it #1594
Conversation
This file contains 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
pixelflips
approved these changes
Sep 19, 2022
teenwolfblitzer
approved these changes
Sep 19, 2022
| const handleMouseDown = (evt) => setMouseDownSrc(evt.target); | ||
|
|
||
| const handleMouseUp = (evt) => { | ||
| if (evt.target === evt.currentTarget && evt.target === mouseDownSrc) { |
Merged
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.
Description
Product teams discovered that when a user clicks and drags within a modal but releases outside the Modal, it is dismissed as if the full click happened outside the modal. This PR aims to address this behavior by listening for both
mousedownandmouseupso as to ensure both happen in the dismiss area before triggering the dismiss action.Screenshots
https://www.loom.com/share/4c29d75c753c4a119e7763e011d9677e
Testing in
sage-libSee http://localhost:4000/pages/component/modal?tab=preview
See http://localhost:4100/?path=/story/sage-modal--wired
Testing in
kajabi-productsmousedownandmouseup. This allows us to be more precise to dismiss only when full click happens outside the modal. Fixes an issue where users inadvertently dismiss the modal if they click and drag within a modal (such as to select content in a form field) and release outside the modal.Related
https://kajabi.atlassian.net/browse/DSS-94