[react-aria-components] Popover not compatible with native popover API that became widely available in December.

[mmorris8]

Provide a general summary of the issue here

There's a newly available popover API. Yay!

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/popover

The React Aria Popover control doesn't work with it. If you put a Popover element inside a native element popover (say, as part of a popover form dialog) it won't work.

🤔 Expected Behavior?

Popover was developed as a component during a time when there was no equivalent API in the browsers. Now that one has been added any alternate implementation should be made compatible with it.

😯 Current Behavior

React Aria Popover uses z-index to get its popover to the top of the stack. This isn't compatible with the new popover API which uses a special top layer in the browser to place popovers, dialogs and any other elements that use the top layer in front of those that do not. As a result React Aria components which leverage popovers like the ComboBox nested inside popover elements will cease to function. While it is possible to nest them in over Aria popovers, the native browser API is easier to work with and hooks into CSS to allow fine control of the animation of the popover.

💁 Possible Solution

Feature detection can be used to detect the presence of the popover API, and the Aria Popover can leverage the API when it is present and use the existing code for older browsers. However, this could present backwards compatibility challenges.

The popover API also introduces new attributes for buttons - popovertarget and popovertargetaction. These need to be relayed to the interior button element.

🔦 Context

I have a facet list with combo boxes. On mobile I want to slide in the facet list from the left since there isn't enough room to keep it continually visible. I composed the desktop view first.

🖥️ Steps to Reproduce

<button popovertarget="my-popover">Open Popover</button>

<div popover="auto" id="my-popover">Greetings, one and all!
<ComboBox>
  <Button>Click to open Popover</Button>
  <Popover>Alas, I cannot work in this context.</Popover>
</ComboBox>
</div>

Version

react-aria 3.34.3

What browsers are you seeing the problem on?

Other

If other, please specify.

All browsers that support the popover api

What operating system are you using?

Mac OSX

🧢 Your Company/Team

Covenant Health

🕷 Tracking Issue

No response