Dismissing a dialog by clicking outside inconsistently triggers links outside

[victorandree]

Provide a general summary of the issue here

This is likely the same underlying issue as #1513 (and duplicates), but having read that issue and the workaround in #7026 that closed it, I still think there's an open issue with closing popovers by pressing on the overlay (outside the popover).

Basically, if you display a popover in a dialog, and then press a link outside the popover/dialog, you will click the link on Android (and Chrome and Firefox with touch simulation). This is not the same behavior as seen on desktop or iOS, where clicking/pressing outside the popover/dialog first dismisses it.

That is, even without Modal to provide an explicit underlay, there seems to be a modality built into popover/dialog on desktop and iOS, that's not present on Android. The desktop and iOS behavior matches native elements (and IMO, user expectations).

I technically think this is a separate issue from #1513, because #1513 is about elements behind a popup being triggered and the comment by @devongovett about #7026 refers to "the element inside the overlay". This issue is about elements (links) outside the popup and behind the underlay.

🤔 Expected Behavior?

I'm not entirely sure what the expected behavior is.

• The native popover element is not modal. If a popover is open, pressing an element outside it triggers a click on that element (see e.g. this basic example from MDN: https://mdn.github.io/dom-examples/popover-api/basic-declarative/).
• In many cases though, the popover/dialog is actually modal, especially when it's used as a popout menu. For example, this is the behavior of the native select element.

In React Aria Components, popovers alone or dialogs inside popovers are often demonstrated for popout menus, and you'd expect them to behave like the native versions. For example, the examples on the following pages.

• https://react-spectrum.adobe.com/react-aria/Popover.html
• https://react-spectrum.adobe.com/react-aria/Select.html
• https://react-spectrum.adobe.com/react-aria/DatePicker.html
• https://react-spectrum.adobe.com/react-aria/Dialog.html

In these cases, there seems to be a built-in modality to the popover. I think that's expected. It's also how it works on iOS – but not on Android.

(Actually, I just noticed that when I open the ComboBox example on Chrome on Desktop, I can click on the links outside the combo box without dismissing it).

For what it's worth, when you expand the left-hand navigation bar on mobile, there's an underlay covering the rest of the page. Pressing a link behind that underlay will click it, on all devices

😯 Current Behavior

The behavior is easily seen on the component pages for React Aria Components, where there are links on the same page. These are therefore simpler demos than the Storybook.

• Select. Try opening the first "Favorite Animal" example, with a link in view (e.g. the the <select> link in the following section). Press the link with the menu open. On Android, the link will trigger.
• DatePicker. Again, click on a link with the date picker open. Same behavior.
• Dialog. The popover example demonstrates the same behavior.
• Popover. The Settings example demonstrates the same behavior.

Different behaviors:

• ComboBox. Do the same thing. In this case, the link will actually trigger on all browsers I tested (might be related to Button onPress event on iOS can select the wrong element when virtual keyboard is open #6512?).
• Modal. The dismissable modal will NOT trigger a click when you click outside the dialog (it's best to try and click the link to Tailwind CSS above here).

💁 Possible Solution

A popover/dialog should not necessarily be "modal" just because it's dismissed when you click outside it. But the behavior is inconsistent and sometimes magically "modal", except on Android, for some inputs.

If wrapping everything in Modal is required for true modality, the documentation should be updated to include it.

🔦 Context

No response

🖥️ Steps to Reproduce

Please refer to the links above. But, in general:

1. Trigger a popover in a dialog.
2. Press on a link outside the popover to dismiss it.
3. Sometimes this will trigger a click on that link.

Version

3.37.0 (September 30, 2024 release)

What browsers are you seeing the problem on?

Firefox, Chrome

If other, please specify.

No response

What operating system are you using?

Android

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[gabrieljim]

same here

[devongovett]

I think we can apply the same idea as in #7542 here. Instead of triggering onInteractOutside during the onPointerUp event, we could wait until onClick. What happens is the DOM gets mutated between onPointerUp and onClick and the browser ends up clicking the wrong element: https://issues.chromium.org/issues/40732224

It's in this file if someone wants to give it a shot: https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/interactions/src/useInteractOutside.ts