fix(ripple): ensure ripple occurs when a keyboard generated click hap…

…pens after a pointer click PiperOrigin-RevId: 527926090
material-components · Apr 28, 2023 · 016b851 · 016b851
1 parent 4c229d9
commit 016b851
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 0 deletions.
diff --git a/ripple/lib/ripple.ts b/ripple/lib/ripple.ts
@@ -334,6 +334,7 @@ export class Ripple extends LitElement {
   }
 
   private async endPressAnimation() {
+    this.state = State.INACTIVE;
     const animation = this.growAnimation;
     const pressAnimationPlayState = animation?.currentTime ?? Infinity;
     if (pressAnimationPlayState >= MINIMUM_PRESS_MS) {

diff --git a/ripple/lib/ripple_test.ts b/ripple/lib/ripple_test.ts
@@ -30,6 +30,10 @@ declare global {
 class TestRipple extends Ripple {
 }
 
+interface WithState {
+  state: number;
+}
+
 describe('Ripple', () => {
   const env = new Environment();
 
@@ -138,5 +142,15 @@ describe('Ripple', () => {
 
       expect(surface).not.toHaveClass(RippleStateClasses.HOVERED);
     });
+    it('responds to keyboard click after mouse click', async () => {
+      const {instance, harness} = await setupTest();
+      const STATE_INACTIVE = 0;
+      await harness.clickWithMouse();
+      await env.waitForStability();
+      expect((instance as unknown as WithState).state).toBe(STATE_INACTIVE);
+      await harness.clickWithKeyboard();
+      await env.waitForStability();
+      expect((instance as unknown as WithState).state).toBe(STATE_INACTIVE);
+    });
   });
 });