SelectMenu onOutsideClick & Portals

[emplums]

In the last major release, we removed the css overlay approach to handling showing/hiding the SelectMenu to support places where a SelectMenu might be nested inside of an absolutely positioned element.

The JS approach checks if the click happens outside of the details element that wraps the SelectMenu to determine whether or not to close the menu.

In another application that uses Primer React Components, React Portals are used to open menus in places other than where they are triggered. Because of this, the menu content no longer has a details parent, and clicking on items inside of the menu (such as the filter input) closes the menu when it should not.

1. Should we support using menus inside of Portals? Is this an accessibility concern that we should intentionally not support?
2. Would it make sense to add an onOutsideClick callback to SelectMenu so that users can opt out of the default SelectMenu outside click handling? Will this mess up the internal state?

Follow up items

• Research accessibility of using menus inside of React Portals
• Test out a custom onOutsideClick approach

cc @lerebear

[emplums]

I believe the approach we should use moving forward is:

1. A reusable onOutsideClick behavior that the SelectMenu.Modal uses
2. We pass a ref to onOutsideClick to determine what area counts as an "inside" click
3. Someway to also ignore clicks on the trigger element?

[colebemis]

We will soon be deprecating SelectMenu in favor of SelectPanel