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

[Dialog][Popover] Prevent outside touch interactions #653

Open
vladmoroz opened this issue Sep 27, 2024 · 1 comment
Open

[Dialog][Popover] Prevent outside touch interactions #653

vladmoroz opened this issue Sep 27, 2024 · 1 comment
Labels
component: alert dialog This is the name of the generic UI component, not the React module! component: dialog This is the name of the generic UI component, not the React module! component: popover The React component. core Infrastructure work going on behind the scenes

Comments

@vladmoroz
Copy link
Contributor

vladmoroz commented Sep 27, 2024

To explore:

  • Always prevent outside touch interactions, even with modal={false}
    • Truly non-modal popups are always problematic on mobile devices because there are no hovers to indicate whether outside interactions will activate the interactive elements beneath
    • There tends to be much less "free" space for a safe click out on mobile
  • When dismissing popups with outside interactions, do we want to close the component using touchstart or touchend?
    • All native iOS popups close on touch start
    • Counter point: closing on touchstart might make zooming/panning harder
@vladmoroz vladmoroz added the core Infrastructure work going on behind the scenes label Sep 27, 2024
@atomiks
Copy link
Contributor

atomiks commented Sep 29, 2024

With backdrops, we can't use touchstart (actually, pointerdown) since the event falls through the backdrop and triggers events on elements where the touch occurred, even if it was modal. That's the same issue mentioned for point number 1. The mousedown event (currently used) works lazily on touch, but eagerly with mouse.

@michaldudak michaldudak added component: alert dialog This is the name of the generic UI component, not the React module! component: dialog This is the name of the generic UI component, not the React module! component: popover The React component. labels Oct 11, 2024
@michaldudak michaldudak changed the title Modality with touch devices [Dialog][Popover] Prevent outside touch interactions Oct 11, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: alert dialog This is the name of the generic UI component, not the React module! component: dialog This is the name of the generic UI component, not the React module! component: popover The React component. core Infrastructure work going on behind the scenes
Projects
None yet
Development

No branches or pull requests

3 participants