CODEWITHSUNDEEP
javascriptreactjs
Patrickkx
Patrickkx

Reputation: 1870

Modal closes if clicked inside and release mouse outside

Im having an issue with modal in React. The problem is Modal closes if I click inside content and move mouse and release outside. This shouldnt happen.

Currently it works fine because if I click outside content the modal closes, but if I click inside, the modal stays.

But dragging mouse click from inside to outside closes it...

https://codesandbox.io/s/awesome-newton-fqe6b

Looking for help! Thanks!

Upvotes: 0

Views: 550

Answers (1)

Chris B.
Chris B.

Reputation: 5763

I do experience the behavior you're describing. Pretty weird, I was under the impression that e.target in this instance would always refer to the interior div if the click event was initiated on that element, but maybe that's not accurate. I tried using stopPropagation(), but it doesn't work because the click event seems to completely ignore the element that the mousedown portion of the click was actually initiated on.

I made a hacky workaround that will save the initial target in the state for comparison with the currentTarget and achieve the effect you're looking for, but this definitely bears some looking in to.

Upvotes: 2

Related Questions