fix(ripple): not activating when clicked after touch (#932)

material-components · Jun 21, 2019 · b2f7855 · b2f7855
1 parent 0818061
commit b2f7855
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 0 deletions.
diff --git a/packages/ripple/index.tsx b/packages/ripple/index.tsx
@@ -264,6 +264,8 @@ export function withRipple<
       this.props.onMouseDown && this.props.onMouseDown(e);
       if (!this.isTouched) {
         this.activateRipple(e);
+      } else {
+        this.isTouched = false;
       }
     };
 

diff --git a/test/unit/ripple/index.test.tsx b/test/unit/ripple/index.test.tsx
@@ -75,6 +75,22 @@ test('mouseDown event triggers activateRipple', () => {
   mockRaf.restore();
 });
 
+test('mouseDown sets isTouched to false if isTouched is true', () => {
+  const mockRaf = createMockRaf();
+  const mouseDownHandler = coerceForTesting<React.MouseEventHandler>(td.func());
+  const wrapper = mount<DivProps>(<DivRipple onMouseDown={mouseDownHandler} />);
+  const foundation = coerceForTesting<RippledComponent>(wrapper.instance())
+    .foundation;
+  foundation.activate = td.func<(evt?: Event) => void>();
+  (wrapper.instance() as any).isTouched = true;
+  wrapper.simulate('mouseDown');
+
+  mockRaf.flush();
+  td.verify(foundation.activate(td.matchers.isA(Object)), {times: 0});
+  assert.isFalse((wrapper.instance() as any).isTouched);
+  mockRaf.restore();
+});
+
 test('mouseUp event triggers deactivateRipple', () => {
   const mouseUpHandler = coerceForTesting<React.MouseEventHandler>(td.func());
   const wrapper = mount<DivProps>(<DivRipple onMouseUp={mouseUpHandler} />);