IconButton rendered in List.Item without an explicit press handler is not clickable in React Native for Web #3898
Description
Current behaviour
Hi! I'm using React Native Web. I have a List.Item which renders an IconButton using right. In version 5.0.0-rc.6 of react-native-paper, this works fine. However 5.0.0-rc.7 broke this, and now such a button is not clickable (at least in web, other platforms seems to be fine).
Expected behaviour
The button should still be clickable.
How to reproduce?
https://snack.expo.dev/@boruwa/intelligent-graham-crackers
As you can see, everything's so far fine in web. Now if you change the react-native-paper version in package.json to 5.0.0-rc.7 (or 5.0.0-rc.8, for some reason the former seems not to work in Snack. However, I locally verified that 5.0.0-rc.7 is the faulty one), the button becomes non-clickable.
What have you tried so far?
The problem comes from the fact that TouchableRipple explicitly checks for any touch handler and if there's none, it passes an explicit disabled: true prop to Pressable which, in React Native for Web, then passes it further to underlying View, and this causes the rendered view to get pointer-events: none !important style that prevents the item (and its descendants) from receiving any click events.
Now, I'm not sure if that's an issue with react-native-paper or react-native-web (maybe it shouldn't have worked with TouchableWithoutFeedback as well - but it did), but it started happening after bumping the former, so I will start here. Especially that docs for List.Item do not mention explicitly that it has to be clickable in any way or otherwise it will become disabled and will make its descendant elements non-clickable as well.
The bug can easily be overcome by adding an empty press handler to List.Item, but that's not ideal, as it then starts generating the ripple effect, misleading the user that it's clickable.
Your Environment
| software | version |
|---|---|
| ios | x |
| android | x |
| react-native | 0.69.6 |
| react-native-paper | 5.8.0 |
| node | 16.16.0 |
| npm or yarn | 8.11.0 |
| expo sdk | 46.0.0 |