Autocomplete: Implement and use focus outside utility for managing dismissal

[aduth]

Fixes #2669
Related: #3174, #2974

This pull request seeks to improve the behavior of Autocomplete close, resolving an issue where block selection on touch devices does not work correctly. Specifically this resolves an issue iOS devices in the current implementation to test where focus has shifted, relatedTarget is the popover contents itself (.components-popover__content).

These changes include a new withFocusOutside higher-order component similar to the one suggested in #2974 to help encapsulate logic of testing whether a blur really causes focus to leave an element. This is meant to help in two ways:

• A blur event's relatedTarget is not reliable in IE11 (CodePen, React's blur may not have relatedTarget in IE 9-11 where it is supported. facebook/react#3751, onFocusIn/onFocusOut events facebook/react#6410)
• Portal content may be rendered elsewhere in the DOM, so testing relatedTarget with Element#contains is not always reliable. As implemented here and leveraging portal event bubbling behavior, withFocusOutside will account for focus shifting into portaled content.

Testing instructions:

Repeat testing instructions from #3174, also confirming selection on a touch device (e.g. XCode iOS simulator).

Verify that there are no regressions in clicking or tabbing outside of the paragraph field while an autocomplete suggestions list is open.

[codecov]

Codecov Report

Merging #3235 into master will increase coverage by 0.19%.
The diff coverage is 100%.

@@            Coverage Diff            @@
##           master   #3235      +/-   ##
=========================================
+ Coverage   31.91%   32.1%   +0.19%     
=========================================
  Files         247     248       +1     
  Lines        6856    6874      +18     
  Branches     1246    1248       +2     
=========================================
+ Hits         2188    2207      +19     
+ Misses       3925    3924       -1     
  Partials      743     743

Impacted Files	Coverage Δ
components/autocomplete/index.js	77.47% <100%> (+0.67%)	⬆️
...omponents/higher-order/with-focus-outside/index.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 c266238...6696861. Read the comment docs.

[ephox-mogran]

This is so similar to our first iteration of #2948. I see you're going with the setTimeout solution, rather than the focusin on the document (like how react-click-outside works). I think focusin for the document may not detect when we try to focus something not in the DOM (or not focusable) and it defaults to body, so it's probably for the best.

[aduth]

This is so similar to our first iteration of #2948.

Yes, h/t could have been more explicit, but #2974 was mentioned in the original comment as inspiration. 👍

[ephox-mogran]

No problem at all. Your solution for that issue was a lot nicer than this approach for that issue would have been.

[aduth]

Rebased with consideration of #2896. @EphoxJames could you give this one a look over given updates to the Autocomplete?

[BoardJames]

Clicking in a different part of the paragraph block does not close the popup. I suggest keeping the onClose handler for Popover though you could also just detect any clicks that aren't on the popover.

[aduth]

Good call @EphoxJames , ideally we'd not need both the click-outside detection of the popover and the focus-outside detection of the autocomplete component, but since the popover never truly receives focus it would appear we unfortunately do need to handle both.