Close the modal window on the first click when using stopPropagation()

[pavelgromyko]

I understand that such questions have already been encountered, but I still haven’t found a solution for my case. I will be grateful to the community for help.

I'm using ReactModal to create a modal window in component MenuModal (parent) . The modal window contains cards with information about products (Card (child) component). The Card component has onClick={(e) => {e.stopPropagation();}} (to call a submenu) which does not allow close the modal window the first time (only the second).

Current Behavior

1. You click on the "Open Modal" button
2. In the modal window, click on the phrase "Some Text"
3. Move the cursor outside the modal window and click (to close the modal window). But there is no closure.
4. Click the cursor a second time and the modal window closes

Expected behavior:

Close modal window on first click

Real example

Here is a simplified code, but the gist is clear.
https://codesandbox.io/p/sandbox/magical-dawn-tztk55

[diasbruno]

@pavelgromyko If you need to use stopPropagation, you must know that the event is yours, otherwise you will stop events that needs to be handled by other elements.

[pavelgromyko]

@diasbruno Does this mean there is no way I can fix this?

[diasbruno]

There is! You need to wrap your call to stopPropagation checking if the event is yours.

if (event.target === myElement) {
  event.stopPropagation();
}