fix(Popup): click/keypress handling logic for content

[kuzhelov]

Fixes #1324

TODO

• update changelog

---

Problem

Click on popup content's button toggles popup content to close.

Cause

The cause of the problem is rather convoluted. The reason popup closes is because it 'sees' click on the content's button as outside click.

Why? Popup has the following logic to detect outside clicks

• collect refs to all inner elements (incl potential refs to inner nested popups)
• on click check if click is made outside any of these refs' areas
  • if it is an outside click, close the popup

While idea is straightforward, it turns out that currently we have problems caused by order of click events processing. When button inside of popup content is clicked,

• DOM tree updates
• and only after the logic of checking refs' areas is taking place. At that moment, however, click's coordinates doesn't match any refs' updated areas.

Resolution

To address it, for now, capture prop of popup's <EventListener /> is used - this activates capture subscription mode for DOM events, which guarantees that corresponding event handler will be invoked before any other event's effects. (https://developer.mozilla.org/ru/docs/Web/API/EventTarget/addEventListener)

Additional notes

These changes will be merged after #1463 , where e2e (browser) test is introduced for the issue's case.

[codecov]

Codecov Report

Merging #1482 into master will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##           master    #1482   +/-   ##
=======================================
  Coverage   73.59%   73.59%           
=======================================
  Files         807      807           
  Lines        6117     6117           
  Branches     1804     1785   -19     
=======================================
  Hits         4502     4502           
  Misses       1609     1609           
  Partials        6        6

Impacted Files	Coverage Δ
packages/react/src/components/Popup/Popup.tsx	67.74% <ø> (ø)	⬆️

---

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 fae74b5...c880286. Read the comment docs.