React-native-paper: react-native-web createMaterialBottomTabNavigator delivers clicks to background tabs

[paour]

Current behaviour

• I have a material bottom tab navigator where each tab contains a stack of screens
• on mobile it works fine
• if I use a non-Paper bottom tab createBottomTabNavigator, it works fine on the
• with a Paper bottom tab, on react-native-web, once they have been rendered once, background tabs get clicks

Expected behaviour

• I expect only the frontmost tab to get clicks

Code sample

Screenshots (if applicable)

What have you tried

Your Environment

| software | version
| --------------------- | -------
| ios or android | web
| react-native | 0.62.2
| react-native-paper | 4.4.0 (which contains a recent fix for getting tabs to show up the first time the user clicks to them)
| node | 10.17.0
| yarn | 1.22.10
| react-native-vector-icons | 6.6.0
| expo sdk | no Expo

[github-actions[bot]]

Couldn't find version numbers for the following packages in the issue:

• react-native-vector-icons
• npm
• yarn
• expo

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• react-native (found: 0.62.2, latest: 0.63.3)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[github-actions[bot]]

Couldn't find version numbers for the following packages in the issue:

• expo

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• react-native (found: 0.62.2, latest: 0.63.3)
• react-native-vector-icons (found: 6.6.0, latest: 7.1.0)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[jasperro]

Seems I overlooked this in my patch. I have no idea what is causing this to happen, maybe something with the z-index?

[paour]

If it was the z-index, wouldn't the elements be visible? In my case, the screen looks fine, but clicks are intercepted by (it seems) the last tab (by tab index) that has already been displayed, even if it's not currently the selected tab.

[jasperro]

It seems that in switching a tab, the code only changes the opacity of the current screen to 0 and the active one 1. This means everything is still being rendered, just totally transparently. Replacing this with display: none and display:flex removes the issue, I will see if I can make a pull request.

[paour]

Awesome, thanks for jumping on this!

[jasperro]

You can now test my fix by cloning my fix branch git clone https://github.com/jasperro/react-native-paper/ -b fix-tab-clickthrough And running the instructions in https://github.com/callstack/react-native-paper/pull/2370

[paour]

I was able to verify that this fixes the issue I reported (I used yarn link rather than a simple cp but thanks for the detailed instructions).

I hope this can be merged before the next release.

[Trancever]

@paour @jasperro Could you provide a repo/snack that reproduces the issue? Does it happen in every browser for you? Or only some specific ones?

Besides changing the opacity, we also set pointerEvents to 'auto' or 'none' based on the currently selected tab. Theoretically, this should prevent not selected tabs against capturing clicks.

[Trancever]

@paour @jasperro I am closing this for now. Please reopen if the issue still occurs and please provide a repro 🙏 .

[this-fifo]

Hey @Trancever , this certainly still occurs and I can't run my app without patching this with the fix provided by @jasperro

Here's how you can easily reproduce the problem https://snack.expo.io/2LxrXYduA

It's basically the example of stack navigators for each tab from https://reactnavigation.org/docs/tab-based-navigation but I replaced createBottomTabNavigator with createMaterialBottomTabNavigator

Try clicking in the button first and notice how you are taken to the Details screen, now notice how after you navigate to Settings then back to Home you can't click on the button anymore because the Settings screen is still rendered on top of it invisibly

[jasperro]

@Trancever I've made a snack too that also shows this issue at https://snack.expo.io/AMAgczEzZ

Reproduction steps: Click fab (should show button 1 pressed), switch to Two and click fab (should show button 2 pressed), switch back, click the button again and it will show button 2 pressed instead of button 1.