search

prateekbh / preact-material-components

preact wrapper for "Material Components for the web"
https://material.preactjs.com
MIT License
554 stars 81 forks source link

Focus circle persists after tap or click #625

Closed jennydaman closed 6 years ago

jennydaman commented 6 years ago

image

Is there a safe and proper way of making the focus circle disappear after tap/click?

developit commented 6 years ago

You should be able to fix this globally:

let lock = 0;
addEventListener('mouseup', e => {
    if (lock) return;
    let { target } = e;
    do {
        if (target.classList && target.classList.contains('mdc-ripple-upgraded--foreground-activation')) {
            lock++;
            fireEvent(target, 'pointerup');
            fireEvent(target, 'mouseup');
            fireEvent(target, 'touchend');
            lock--;
            return;
        }
    } while ((target=target.parentNode));
}, { passive: true });
jennydaman commented 6 years ago

Looks scary, but thanks!

prateekbh commented 6 years ago

this an other ripples are long pending bugs on mdc-web.

I wonder if we should have a fix available, under experimental folder or something.

jennydaman commented 6 years ago

Before submitting this issue, i searched intensively for a solution upstream. Apparently, the persistent ripple is an intentional feature, it is how they handle :focus state for users using the tab key and no mouse. I'll find and link the original PR when i get home.

My opinion is that this effect is distasteful. The issue does not exist with MDL, but MDC will supersede MDL so I'm trying to stay on the bleeding edge...

jennydaman commented 6 years ago

https://github.com/material-components/material-components-web/issues/809#issuecomment-353147714

https://github.com/material-components/material-components-web/issues/1951#issuecomment-358785479

And just a minute ago: https://github.com/material-components/material-components-web/issues/2337#issuecomment-370544239

prateekbh commented 6 years ago

bug-vs-feature

NotABug 😆

jennydaman commented 6 years ago

I'll summarize my findings for future reference.