[popover][menu][select] Improve outside press using touch modality

[atomiks]

Upstream issue: floating-ui/floating-ui#3138

On iOS for popups like Select and Menu, the outside press behavior is touchend + touchmove with an ~8px movement threshold. If you pressed and held the screen for >1s, then touchend also gets ignored.

This:

1. Makes it easier to dismiss, requiring a less "intentional" press, allowing you to scroll away to dismiss the popup much more easily and feels far less restrictive and annoying
2. Makes it a bit harder to unintentionally dismiss accidentally (the 1s threshold)

Modal dialogs and drawers on iOS match the native mousedown event, which requires an intentional/non-sloppy outside press however.

• Popover currently uses pointerdown which doesn't match either behavior. It's less restrictive than mousedown, but also too permissive/loose compared to iOS' native behavior.
• Menu and Select currently use mousedown, which feels too restrictive — you can't easily scroll away when it's open.
• Dialog/AlertDialog should continue using mousedown as-is, as they take up more of the screen with an obstructive backdrop and are modal-like.

[benface]

Dialog/AlertDialog should continue using mousedown

@atomiks – I feel like it's more friendly to close dialogs on release (mouseup) rather than on press (mousedown), as long as the press was also on the backdrop. Would you be open to make that customizable? 🙏

[atomiks]

@benface it needs a bit of thought into the API as to how it works on touch vs. mouse.

Internally it's configurable via Floating UI in three ways but the upstream issue details why those aren't sufficient:

• click means it closes on "release" on both mouse and touch, but if you scrolled a bit (pointermove on touch) it cancels it from having an effect. This is part of the original issue^ - this should only be the behavior for dialogs with dimming backdrops, not transparent ones. Not used by any of the components yet, but you want this one.
• mousedown means it closes on "release" on touch, but on "press" on mouse (Select, Menu, Dialog)
• pointerdown means it closes on "press" on both touch and mouse (Popover). Not suitable for dialogs with backdrops since touch events fall through and aren't blocked with sloppy outside touches

Most likely it needs some configuration option to separately handle touch and mouse.

outsidePressBehavior={{
  mouse: 'down', // or start/end?
  touch: 'up', // or start/end?
}}

[benface]

That sounds great!

click means it closes on "release" on both mouse and touch, but if you scrolled a bit (pointermove on touch) it cancels it from having an effect.

Makes sense. I'm curious, how does this mode handle pressing (with a mouse) on the backdrop, then moving the cursor away from the backdrop (on the dialog/popup itself, for instance), and then releasing? It shouldn't close then, right? (as opposed to moving the cursor, but still releasing somewhere on the backdrop)

this should only be the behavior for dialogs with dimming backdrops, not transparent ones.

Not sure what you mean by dialogs with transparent backdrops. Non-modal dialogs? If a backdrop was fully transparent it would look like there's no backdrop, and so I would expect to be able to click on elements behind the modal. 🤔

[atomiks]

Makes sense. I'm curious, how does this mode handle pressing (with a mouse) on the backdrop, then moving the cursor away from the backdrop (on the dialog/popup itself, for instance), and then releasing? It shouldn't close then, right? (as opposed to moving the cursor, but still releasing somewhere on the backdrop)

Yeah it cancels it if the mouseup wasn't also on the backdrop.

Not sure what you mean by dialogs with transparent backdrops. Non-modal dialogs? If a backdrop was fully transparent it would look like there's no backdrop, and so I would expect to be able to click on elements behind the modal. 🤔

Transparent backdrops are used by Menu and Select in modal=true mode to enforce pointer modality. This prevents you from clicking anything when dismissing and unintentionally triggering something accidentally when sloppy outside-pressing