Material-components-web: bug(ripple): Clicking on element with ripple, stays highlighted.

[izakfilmalter]

Seems that with the new ripple mixins, everything that has a ripple stays active when selected.

I am not sure if this is the new design direction, or regression. One area that this causes problems is with a long list of mdc-list-item mdc-ripple-upgraded. On android when you scroll this list, each one gets this selected state that you touch as you are scrolling through it.

Is there a simple way of disabling this?

[izakfilmalter]

After doing some more digging. Seems like the following class stays active on the tab: mdc-ripple-upgraded--background-focused.

[izakfilmalter]

When a mdc-tab is a a tag you get this issue. If it is any other tag eg span, this goes away.

[acdvorak]

Thanks for filing this issue and including a super-helpful video!

RE your first question: The new ripple focus behavior is intentional for UX and accessibility reasons. Whenever the browser tells us that a focusable* element received focus - via either the :focus CSS selector or the focus JS event - we render it in a focused state, with a slightly darker background, so that the user knows where focus will go when they press the Tab key.

_* A "focusable element" is one that the browser allows the user to focus without any special markup (e.g., <a href="...">, <button>, <input>), or a non-focusable element (like <span>) that has been made focusable by giving it a tabindex="0" attribute._

The MDCTab constructor creates a ripple automatically, so the only way to prevent the focus state from showing on a tab is to make the tab non-focusable (e.g., by using a <span> element). I do not recommend this, as it will make your tabs unusable for many people.

RE accidental activation while scrolling: There's an open bug for that: #1080

[izakfilmalter]

@acdvorak Thanks for the response.

The behaviour makes it feel more like a ripple bug than signifying focus. I get having a style for tabbing around the interface. Totally makes sense, the big con though is when you click on something it doesn't return to it's initial visual state. Is there a way where there can be both, interaction results in initial state while tabbing results in a selected state?