search

callstack / react-native-paper

Material Design for React Native (Android & iOS)
https://reactnativepaper.com
MIT License
12.81k stars 2.08k forks source link

Inconsistent pointerEvents Behavior in FAB.Group on Mobile Browsers #4202

Closed deeeed closed 9 months ago

deeeed commented 10 months ago

Current behaviour

The FAB.Group component in React Native Paper, when closed, overlays the UI with a transparent layer that captures touch events on mobile browsers. This prevents users from interacting with elements beneath the FAB.Group, as seen in the attached screenshot.

I also noticed that the behaviour isn't consistent and depending on the scrolling status of the window, the interaction may not be blocked...

Expected behaviour

The FAB.Group should not interfere with the UI when in a closed state, allowing users to interact with other elements on the page.

How to reproduce?

Preview

image

What have you tried so far?

A potential solution is to adjust the CSS property touch-action or conditionally apply pointerEvents based on the component's open state. When the FAB.Group is closed, pointerEvents should be set to 'none', and 'auto' when open. The touch-action: none; CSS property might also be relevant to control the default touch behaviors, as discussed in this Stack Overflow thread.

Your Environment

software version
ios x
android x
react-native x.x.x
react-native-paper x.x.x
node x.x.x
npm or yarn x.x.x
expo sdk x.x.x
lukewalczak commented 10 months ago

Hey @deeeed, please provide the repro in form of expo snack or small github repo.

github-actions[bot] commented 10 months ago

Hey! Thanks for opening the issue. Can you provide a minimal repro which demonstrates the issue? Posting a snippet of your code in the issue is useful, but it's not usually straightforward to run. A repro will help us debug the issue faster. Please try to keep the repro as small as possible. The easiest way to provide a repro is on snack.expo.dev. If it's not possible to repro it on snack.expo.dev, then you can also provide the repro in a GitHub repository.

github-actions[bot] commented 9 months ago

Hello 👋, this issue has been open for more than a month without a repro or any activity. If the issue is still present in the latest version, please provide a repro or leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution or workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix it.

abretonc7s commented 2 days ago

image How can I re-open?