Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Popover, Menu, Select] Improve outside press using touch modality #1214

Open
atomiks opened this issue Dec 23, 2024 · 0 comments
Open

[Popover, Menu, Select] Improve outside press using touch modality #1214

atomiks opened this issue Dec 23, 2024 · 0 comments
Labels
component: menu This is the name of the generic UI component, not the React module! component: popover The React component. component: select This is the name of the generic UI component, not the React module! enhancement This is not a bug, nor a new feature

Comments

@atomiks
Copy link
Contributor

atomiks commented Dec 23, 2024

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.
@atomiks atomiks added component: select This is the name of the generic UI component, not the React module! component: menu This is the name of the generic UI component, not the React module! enhancement This is not a bug, nor a new feature component: popover The React component. labels Dec 23, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: menu This is the name of the generic UI component, not the React module! component: popover The React component. component: select This is the name of the generic UI component, not the React module! enhancement This is not a bug, nor a new feature
Projects
None yet
Development

No branches or pull requests

1 participant