[BottomNavigation] onClick does not fire if tapped while scrolling

When i try to tap (touch click) on a BottomNavigationAction while the page is currently scrolling, the onClick event handler is never called. The TouchRipple effect however runs flawlessly, which makes me believe that this is an issue with how touch events are handled in ButtonBase. If i change my onClick for a onTouchStart it is called as expected, but of course this is not a viable solution, as it does not take swiping into account.

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

If i press the BottomNavigationAction while the page is scrolling, the page stops scrolling and the TouchRipple effect runs. If i press again, now that the page has stopped scrolling, the onClick event handler is called.

Expected Behavior 🤔

When i press the BottomNavigationAction while the page is scrolling, the TouchRipple effect runs and my onClick handler is called.

Steps to Reproduce 🕹

Steps:

1. Go to a page where you have a BottomNavigation, where you can scroll vertically
2. Swipe up
3. While the phone is scrolling, tap the BottomNavigationAction

Context 🔦

When you scroll on mobile, it takes a while for it to stop scrolling, if you do it fast enough. Therefore i want it to be possible, to click the BottomNavigationAction while the phone is scrolling.

Your Environment 🌎

I experience the issue when running mobile emulation in Chrome Devtools. A tester is also experiencing this issue on an iPhone 11 Pro on Safari.

Tech	Version
Material-UI	v4.9.1
React	v16.12.x
Browser	Chrome
TypeScript	v3.9.3

[EliasJorgensen]

I have investigated the issue discussed in #27664. It seems to be a timing issue, where the time used by Firefox to fire the onClick event exceeds the 10ms used in the touch timeout here: https://github.com/mui-org/material-ui/pull/22524/files#diff-9bd1b68cd4c10ba7a546c4e18fb32dd88299f9a9de53f2efe599f54cdf24ae92R112.

If i increase the timeout, then i can no longer reproduce the issue in Firefox, using the demo from #27664 (i checked out a commit before the author changed it to use a button element).

The 10ms delay were taken without additional thought, from this PoC from @oliviertassinari, but i can see that the ripple uses an 80ms delay (https://github.com/mui-org/material-ui/blob/a9194b570c7384ae869023020d084229fdc0dc32/packages/material-ui/src/ButtonBase/TouchRipple.js#L12). I imagine that it is that high, due to the exact same issue as this. Thus, using the same delay would resolve this issue.

Of course this does not resolve the question of functionality raised by @eps1lon, but it fixes the bug reported in #27664 without removing behaviour that i, and users of mine, regard as expected. 😄

[EliasJorgensen]

@eps1lon I disagree, the ripple starting, when clicking - not when doing a gesture/swipe, indicates to the user (at least any user who does not know how MUI works) that the button has been clicked. When the ripple starts, the user then expects the appropriate action to occur. If the given action does not occur, the user will interpret this as an error. The whole reason i opened this issue in the first place, is because a (non-technical) customer believed this to be a bug in the software we built for them.

When one person interpret this as a bug, there must be a whole lot more who just haven’t said anything.