Imagine the following setup

<Popup closeOnDocumentClick={true}>
    <Popup><button onClick={e=> e.stopPropagation()}>Click Me!</button></Popup>
</Popup>

Clicks on the inner popup counts as a document click therefore closes the 1st popup. This is because even though these are logically nested in the React Virtual DOM, on the rendered page they are parallel div(s)

How can we prevent this behavior? i.e. prevent clicks on the inner Popup from being treated as a outer Popup closing click?

Solution 1

Conditionally turn off closeOnDocumentClick if the inner Popup is open

I do not like this solution, because the inner Popup could be abstracted by as a Component, I don't want to create additional coupling

Solution 2

I don't have a solution 2