Rmwc: nonInteractive List has highlight/ripples

[filbertteo]

What RMWC Version are you using?

1.6.3, but tested in codesandbox.io using latest (1.7.6)

What browser(s) and React Version is this bug affecting?

Tested in Chrome 67.0.3396.99 and Firefox 61.0.1, with React 16.0.0, 16.4.0.

What build system are you using?

Webpack (initialised with react-boilerplate)

What are the steps to reproduce the bug?

Use a <List nonInteractive />. Check out https://codesandbox.io/s/8yn6p73l42

What is the expected behavior?

List items should not have highlights/ripples.

What is the actual behavior?

List items have highlights/ripples.

Any other information you believe would be useful?

This only happens when using import '@material/ripple/dist/mdc.ripple.min.css'; or import 'material-components-web/dist/material-components-web.min.css';. Importing styles for individual components (as long as mdc.ripple.min.css isn't imported) doesn't cause the bug.

I believe it's an RMWC bug and not an MDC bug, because I tried manually adding the mdc-list--non-interactive class to one of the lists at https://material-components.github.io/material-components-web-catalog/#/component/list and it worked fine, even though the page uses the full CSS.

[jamesmfriedman]

Simple short term fix, add ripple={false} to the list items
https://codesandbox.io/s/5k5x92z26k

I think this comes down to a different in how Vanilla MDC inits things vs RMWC (component based). I'll dig in and see if I can fix this properly.

[jamesmfriedman]

There isn't a good technical solution to this since the ListItem children do not have the context of their parent and the parent's nonInteractive flag doesn't share any concerns of the ripple.

I've updated the documentation for the nonInteractive prop to include information on adding ripple={false} to the ListItems which appears to be the appropriate solution.

[mattferrin]

FYI only, I find myself falling back to CSS non-component elements a lot when I don't want the list to highlight on mouse hover. Not really an issue though as I sometimes like to fall back like that for styling reasons. @jamesmfriedman