-
Notifications
You must be signed in to change notification settings - Fork 14
Use onMouseDown instead of onClick for auto closing modals #342
Conversation
7cd4921
to
66f408d
Compare
…g mouse outside will not close it
66f408d
to
d007890
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👍 bit jarring to have it close before my finger moved up, but certainly better than what we have now
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
✨ 🚀
src/Modal/Modal.tsx
Outdated
@@ -140,6 +140,11 @@ export const Modal: React.FC<Props> = ({ | |||
primaryAction, | |||
secondaryAction, | |||
}) => { | |||
const mouseDownTarget = useRef<EventTarget | null>(null); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
would we ever want this to store a reference to something other than the backdrop element?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
nope, are you thinking renaming to something like backdropMouseDownTarget
?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
yes please 👍
I was briefly confused trying to figure out why weren't clearing out the reference in the onClick so the stale one isn't used again
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
(feel free to merge at will following rename btw)
🚀 PR was released in |
This will prevent clicking in the modal and moving mouse outside from closing the modal
📦 Published PR as canary version:
8.20.2-canary.342.9199.0
✨ Test out this PR locally via:
npm install @apollo/space-kit@8.20.2-canary.342.9199.0 # or yarn add @apollo/space-kit@8.20.2-canary.342.9199.0