Repository: material-ui
Issue: [BottomNavigation] onClick does not fire if tapped while scrolling
Labels: new feature,component: bottom navigation,ready to take

<!-- Provide a general summary of the issue in the Title above -->
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.
<!--
  Thank you very much for contributing to Material-UI by creating an issue! ❤️
  To avoid duplicate issues we ask you to check off the following list.
-->

<!-- Checked checkbox should look like this: [x] -->

- [x] The issue is present in the latest release.
- [x] I have searched the [issues](https://github.com/mui-org/material-ui/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.
<!-- Describe what happens instead of the expected behavior. -->

## Expected Behavior 🤔
When i press the BottomNavigationAction while the page is scrolling, the TouchRipple effect runs and my `onClick` handler is called.
<!-- Describe what should happen. -->

## Steps to Reproduce 🕹

<!--
  Provide a link to a live example (you can use codesandbox.io) and an unambiguous set of steps to reproduce this bug.
  Include code to reproduce, if relevant (which it most likely is).

  You should use the official codesandbox template as a starting point: https://material-ui.com/r/issue-template

  If you have an issue concerning TypeScript please start from this TypeScript playground: https://material-ui.com/r/ts-issue-template

  Issues without some form of live example have a longer response time.
-->

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.
<!--
  What are you trying to accomplish? How has this issue affected you?
  Providing context helps us come up with a solution that is most useful in the real world.
-->

## 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.
<!--
  Include as many relevant details about the environment with which you experienced the bug.
  If you encounter issues with TypeScript please include version and tsconfig.
-->

| Tech        | Version |
| ----------- | ------- |
| Material-UI | v4.9.1  |
| React       |     v16.12.x    |
| Browser     |     Chrome    |
| TypeScript  |     v3.9.3    |