Fix issue mui#22368

EliasJorgensen · Sep 1, 2020 · cc507f1 · cc507f1
1 parent 2c10ae5
commit cc507f1
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 1 deletion.
diff --git a/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js b/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js
@@ -68,7 +68,35 @@ const BottomNavigationAction = React.forwardRef(function BottomNavigationAction(
     ...other
   } = props;
 
+  const touchStartPos = React.useRef();
+  const touchTimer = React.useRef();
+
+  const handleTouchStart = React.useCallback(event => {
+    const { clientX, clientY } = event.touches[0];
+
+    touchStartPos.current = {
+      clientX,
+      clientY,
+    };
+  }, [touchStartPos])
+
+  const handleTouchEnd = React.useCallback(event => {
+    const target = event.target;
+    const { clientX, clientY } = event.changedTouches[0];
+
+    if (
+      Math.abs(clientX - touchStartPos.current.clientX) < 10 &&
+      Math.abs(clientY - touchStartPos.current.clientY) < 10
+    ) {
+      touchTimer.current = setTimeout(() => {
+        target.dispatchEvent(new Event('click', { bubbles: true }));
+      }, 10);
+    }
+  }, [touchTimer, touchStartPos])
+
   const handleChange = (event) => {
+    clearTimeout(touchTimer.current);
+
     if (onChange) {
       onChange(event, value);
     }
@@ -78,6 +106,16 @@ const BottomNavigationAction = React.forwardRef(function BottomNavigationAction(
     }
   };
 
+  React.useImperativeHandle(
+    ref,
+    () => ({
+      handleTouchStart,
+      handleTouchEnd,
+      innerRef: ref
+    }),
+    [handleTouchStart, handleTouchEnd, ref],
+  );
+
   return (
     <ButtonBase
       ref={ref}
@@ -91,6 +129,8 @@ const BottomNavigationAction = React.forwardRef(function BottomNavigationAction(
       )}
       focusRipple
       onClick={handleChange}
+      onTouchStart={handleTouchStart}
+      onTouchEnd={handleTouchEnd}
       {...other}
     >
       <span className={classes.wrapper}>

diff --git a/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.test.js b/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.test.js
@@ -8,6 +8,7 @@ import {
   createClientRender,
   within,
 } from 'test/utils';
+import { act } from 'react-test-renderer';
 import ButtonBase from '../ButtonBase';
 import BottomNavigationAction from './BottomNavigationAction';
 
@@ -24,7 +25,7 @@ describe('<BottomNavigationAction />', () => {
     classes,
     inheritComponent: ButtonBase,
     mount,
-    refInstanceof: window.HTMLButtonElement,
+    refInstanceof: Object,
     skip: ['componentProp'],
   }));
 
@@ -80,4 +81,40 @@ describe('<BottomNavigationAction />', () => {
       expect(handleClick.callCount).to.equal(1);
     });
   });
+
+  it('should fire onClick on touch tap', done => {
+    const handleClick = spy();
+    const bottomNavigationActionRef = React.createRef();
+
+    const { container } = render(<BottomNavigationAction onClick={handleClick} ref={bottomNavigationActionRef} />);
+    const instance = bottomNavigationActionRef.current;
+
+    act(() => {
+      instance.handleTouchStart({
+        touches: [
+          {
+            clientX: 42,
+            clientY: 42,
+          },
+        ],
+      });
+    });
+
+    act(() => {
+      instance.handleTouchEnd({
+        target: container.firstChild,
+        changedTouches: [
+          {
+            clientX: 42,
+            clientY: 42,
+          },
+        ],
+      });
+    });
+
+    setTimeout(() => {
+      expect(handleClick.callCount).to.equal(1)
+      done()
+    }, 15)
+  });
 });