Repository navigation
Modal does not close after first click on the overlay #958
Description
Activity
I'm having the same issue too. I have to click on the overlay twice if you click on the modal content once for some weird reason.
Reacted by Vlad BrakaloIf you look at the source code, it seems like it was done on purpose.
handleContentOnMouseDown = () => { this.shouldClose = false; }; handleOverlayOnClick = event => { if (this.shouldClose === null) { this.shouldClose = true; } if (this.shouldClose && this.props.shouldCloseOnOverlayClick) { ...No idea why though, I hope a maintainer is reading this and provide some input as to why.
Reacted by Vlad Brakalo@diasbruno hey, just wondering if you can input on my previous comment, thanks :)
Sure, @jacktan165. Unfortunately, this is weird...the code only fails on chrome. Can you, @VladBrok and @jacktan165, check if this code works on older versions of chrome?
No, sorry, I don't have older chrome versions
@diasbruno I'm currently working on a project with a different codebase but it still have this issue. I tried out that codesandbox @VladBrok has linked on Edge and Firefox, as well as an older Chrome version 79, it's still the same issue.
I don't think it's the browser issue, but specifically related to that variable
this.shouldClose. It seems like it is done on purpose. I will look at the git history to see who made that change.It's quiet strange because I don't recall anyone changing
shouldCloseotherwise this issue would've opened sooner...
I'm using firefox and chrome (both latest) and it only failed in chrome.Currently, I don't have much time to work on this project, but it should be a really easy debug to do...so, let me know if you need any help with this. Just ping me.
Good luck!
This piece is a 3 state
null,trueandfalse. When click on the content, it sets to false since it's in the hierarchy and it would trigger the click on the overlay (there are more cases for this like "clicking on the content and release it over the overlay").To better debug this, you can use run the examples and set breakpoints on the handles...this way you can see the internal state in the moment of the event.
Are you using react >16?
Oops sorry!
I deleted my previous comment because I realized I got the whole thing wrong, didn't realized you read my message already.Yeah I'm using React v17 atm. I'm currently debugging my own project atm, and it looks I might be able to figure out the root cause! I have a navigation tab inside the modal, but when I click on one of the navigation tab, it does not trigger
handleContentOnMouseDownat all! No idea why, but I am looking into it. If you click somewhere else then the whole process works.Reacted by Bruno DiasAh, it did trigger
_this.handleContentOnMouseUp, but it is not triggeringhandleOverlayOnClickto resetthis.shouldClose... this is the reason. Now I need to figure out why... initially I thought because my navigation tab isposition: sticky, I changed it tostaticbut it's still the same thing.Try to prevent the event propagation on your component...
I fixed it! I already have
event.stopPropagation()on all myonClick, but the solution is to actually REMOVE them. Theevent.stopPropagation()is preventing the overlay from being clicked.Reacted by Bruno Dias and Atsuta RomanYour component can go out of the modal's content area (over the overlay)?
No it can't. I have this annoying requirement where I have a button on top of a clickable card. Initially I set
event.stopPropagation()on the button so the clickable card is not clicked as well, but that leads to this issue where it ignores the first click when you click on the overlay.Reacted by see2everI fixed it! I already have
event.stopPropagation()on all myonClick, but the solution is to actually REMOVE them. Theevent.stopPropagation()is preventing the overlay from being clicked.it's right, but the overlay element do has some propogation problem.
my solution:
const renderOverlay = ({ onClick, ...rest }: any, children: ReactNode) => { const handleClick = (e: React.MouseEvent<HTMLDivElement>) => { e.stopPropagation(); onClick(e); }; return ( <div {...rest} onClick={handleClick}> {children} </div> ); };
<RcModal className={cx(style.commonModal, className)} isOpen={on} overlayElement={renderOverlay}> ... </RcModal>
Summary:
Modal ignores the first click on the overlay and closes only after a second click
Steps to reproduce:
Expected behavior:
Modal closes after the first click on the overlay
Link to example of issue:
https://codesandbox.io/s/heuristic-goodall-n25g2w?file=/src/App.js
Additional notes:
I've noticed that if I set 'top: 40px' to the 'modal' class, everything works as expected