In nested popovers with ListView, closing nested popover from ListView's onSelectionChange causes both popovers to close

[richiepreece]

🐛 Bug Report

In nested popovers with ListView, closing nested popover from ListView onSelectionChange causes both popovers to close

🤔 Expected Behavior

Only the 2nd popover should close

😯 Current Behavior

It appears as though closing the popover from onSelectionChange does not stop the Overlay's onInteractionOutside from firing. But since the popover closed, the next available popover to check is the original (non-closing) popover. This means that both popovers end up closing.

Weirdly enough, if you click the ListVIew Item's checkbox, the behavior does not exhibit. You have to click the label.

💁 Possible Solution

n/a

🔦 Context

While opening popovers from popovers may be advised against. It does (and will) happen. This issue was mitigated by adding a 0-length timeout before the close method to get the close after the onInteractionOutside method.

i.e.

// Broken:
close();
// Mitigated:
setTimeout(() => close());

💻 Code Sample

Code sandbox example

🌍 Your Environment

Software	Version(s)
react-spectrum	3.24.1
Browser	Chrome
Operating System	MacOS

🧢 Your Company/Team

Adobe Analytics (Workspace Analysis)

[snowystinger]

Could you perhaps not close on selection change? That happens on pointer down. Usually, actions in modals are taken on pointer up. For example, clicking a menu item.

You could attach an onPointerUp to the document after a selection change? Or you could add a close/confirm button.

[richiepreece]

That feels pretty clunky to keep track of. An action on selection (which is a UX requirement rather than a button) is going to be far more common than doing the selection, keeping track of if one just occurred, and then determining if it should close based on if a selection was made, and then doing the action after that.

[snowystinger]

I don't disagree, however, I'm fairly sure that what you're running into is actually a browser bug. See this issue for more information #1513

We haven't determined a way to solve it generically in RSP.

I think the delay of 0 before closing is fine. Otherwise, there are suggestions in my previous comment.

[richiepreece]

Ah. Yeah that does seem related. I’ll probably stick with the timeout for ease of readability. Thanks for the help!