material-components/material-web
1
1
Fork 0
mirror of https://github.com/material-components/material-web.git synced 2024-09-11 13:46:10 +03:00
Code Issues Projects Releases Wiki Activity

fix(ripple): ensure ripple occurs when a keyboard generated click happens after a pointer click

Browse Source 
PiperOrigin-RevId: 527926090
This commit is contained in:
Material Web Team 2023-04-28 10:40:28 -07:00 committed by Copybara-Service
parent 4c229d9872
commit 016b8513e7
2 changed files with 15 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
ripple/lib/ripple.ts
View File

@ -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) {

14
ripple/lib/ripple_test.ts
View File

@ -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);
});
});
});