Activate focus trap when clicking inside AnchoredOverlay

[dgreif]

Describe the bug
AnchoredOverlay currently only activates the internal focus trap if the user interacts with the anchor element in specific ways. New uses of the AnchoredOverlay include behaviors where a user can click inside the overlay multiple times, which removes focus from the anchor without activating the focus trap. In these scenarios, the user is able to tab to other parts of the DOM without restriction. We should handle this scenario and activate the focus trap if the anchor loses focus in some unexpected way.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://primer.style/components/DropdownMenu
2. Open the menu in the example
3. Click on the edge of the menu (small margin on left or right side, but not in an item)
4. Note that focus has left the anchor button. You can now press Tab to focus on other parts of the page

Expected behavior
If focus leaves the anchor without the overlay closing, focus trap should activate immediately

[T-Hugs]

Browser specific? I couldn't repro this with Chrome on Windows. Clicking in that margin doesn't seem to move focus at all (checked with a setInterval printing document.activeElement).

Edit: Looks like this was fixed in #1209. Can we close the issue?

[dgreif]

@T-Hugs thanks for checking in 😄. You are correct that it's not possible to reproduce it now. However, the reason it can't be reproduced is that we are now preventing default on mouse down events that bubble to AnchoredOverlay (#1211). This was an attempt to fix some issues with drag & drop in a different project, but i think it's a change that we will need to back out because it has a lot of negative side effects, like focus not moving to clicked items. If you remove that preventDefault call, this issue can still be reproduced. #1209 fixed a different problem with focusZone in AnchoredOverlay, but it did not fix this focus issue.

[T-Hugs]

That makes sense!