Use popover with isNonModal

[shendrick]

I have an app I'm working with where I am putting multiple controls behind popovers to keep the UI more manageable. However when trying to use the popover for this, the only option seems to be to make it modal or use isNonModal and have to figure out how to auto close it myself when you click away.

Here's an example:
Button Foo - Popover with Slider 1
Button Bar - Popover with Slider 2

So I want to click Foo and make adjustments with slider 1 but then I have to click on Bar twice in order for the slider to popup.

I'm assuming I should use isNonModal, but it's not clear how to use it while still allowing to auto close when something else is clicked on.

I'm looking to do something similar to how adobe express works with some of the popovers. With "position" popover open when you click on "opacity", it opens with one click, not two.

Oddly, there's an example here... https://react-spectrum.adobe.com/react-aria/useOverlayTrigger.html#example where it seems like I can click directly on a link when the popover is open and it works how I'd like, but doesn't work the same in my codebase. Assuming the versions of the library are older here and don't have that same modal behavior?

[snowystinger]

Thanks for the discussion. We have some history around this topic in some previous issues/discussions. Please start with this one Clicking on another overlay trigger or focusable element does not focus the element when an overlay was already open particularly the last comment. Let us know if you have any questions, and I'm going to close this one as working as intended, not a recommended pattern.

[shendrick]

Thanks for the context. That's a bit disappointing, though. It's funny how Adobe's own product seems to go against this. 🤷 For the use case of a tool where you want to access multiple actions you have to do a lot of double clicking. I understand this isn't an accessible and supported pattern, but is there no technical way to accomplish this rather than have to redo popovers with another component library? It looks like the browsers native popover api supports this.. https://mdn.github.io/dom-examples/popover-api/multiple-auto/ Maybe I'll try that.

[snowystinger]

Thanks for the feedback. We will likely re-evaluate when we can use native popovers. Please keep in mind, native ones still need a lot of accessibility work. See #7067 (comment) as a starting point for more information. Given that I don't see this in the spec for popover, it may go away in a future spec or browser update.
It may also have similar issues when determining if the popover should close or not.

As for Adobe's own products doing this, not every application is written with React Spectrum nor are they all necessarily on the latest version. I would consider it a bug in the product at the moment.