fix(Portal): click inside detection

[levithomason]

Fixes #1831

Problem

We've had a cryptic bug for a while where clicks inside of a popup cause it to close. This is because clicks inside are detected by checking if the popup .contains() the clicked e.target node.

This fails if the result of the click also removes the node. Example, a popup containing a Dropdown with removable Labels. When the x is clicked on the label, the label is removed from the Dropdown. The Popup then checks to see if the label is within the Popup node. It has been removed, so the Popup does not .contain() the e.target. The Popup then assumes the click originated outside of the Popup (body click) and closes.

Test case: https://codesandbox.io/s/53ykvz7rk4

Solution

Instead of checking for nodes containing other nodes, we now check that the coordinates of the click event are within the bounds of the Portal. This way, we're shielded from DOM updates within the Portal as a result of click handlers.

[ghost]

Can you please review my PR (#2397) on the fix with tiny changes before submitting this?

Dealing with ClientX/ClientY is bad when another solutions is available

[levithomason]

@Attrash-Islam I reviewed the other PR and it looks like there's a browser compatibility issue with that event property and method. That would have been a nice approach!

One shortcoming here may be that this implementation doesn't consider whether or not the node is in the topmost layer. I can imagine a rare edge case where a click on an open Modal could be considered "inside" of an underlying Portal if they were aligned. That said, this is probably a very rare case if an issue at all.

[codecov-io]

Codecov Report

❗ No coverage uploaded for pull request base (master@723f347). Click here to learn what that means.
The diff coverage is 100%.

@@            Coverage Diff            @@
##             master    #2384   +/-   ##
=========================================
  Coverage          ?   99.73%           
=========================================
  Files             ?      152           
  Lines             ?     2664           
  Branches          ?        0           
=========================================
  Hits              ?     2657           
  Misses            ?        7           
  Partials          ?        0

Impacted Files	Coverage Δ
src/addons/Portal/Portal.js	100% <100%> (ø)
src/modules/Dimmer/Dimmer.js	100% <100%> (ø)
src/modules/Dropdown/Dropdown.js	100% <100%> (ø)

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 723f347...cac9b68. Read the comment docs.

[levithomason]

Released in semantic-ui-react@0.77.2