Material-components-web: React example should clarify that it is CSS only

[ianchanning]

Bugs

The React example checkbox doesn't clear the ripple. See below screenshots in Firefox and Chrome.

Having seen the demos - I assume this is because it is using the CSS only version. Viewing the demos shows the difference between the CSS only ripple (which stays until losing focus) and the JavaScript ripple which disappears immediately.

What MDC-Web Version are you using?

v0.6.0, React v15.4.1.

What browser(s) is this bug affecting?

Firefox v51.0.1 64-bit. Also tested on Chromium v56.0.2924.87 Fedora Project (64-bit)

What OS are you using?

Ubuntu 16.04 (Vagrant VM running on top of Fedora 25).

What are the steps to reproduce the bug?

1. Install and run the example

git clone [email protected]:material-components/material-components-web.git
cd material-components-web/framework-examples/react/
npm install
npm run

1. In the browser http://localhost:3000
2. Tick the checkbox

What is the expected behavior?

The ripple should disappear. The most immediate example I can give you is from the Material UI Checkbox, or otherwise run the demos. The ripple spreads out and disappears after clicking the checkbox.

What is the actual behavior?

The ripple spreads out and stays there.

Firefox screenshot:

Chromium screenshot:

Any other information you believe would be useful?

The code is running on an Ubuntu VM - but I'm viewing the examples in browser on the host OS which is Fedora.

[kminehart]

This is happening to me too on Arch Linux and Firefox 52.0, with the example anyways.

However, this does not happen with my implementation here (which I basically copied from the original, to be completely honest).

The only difference I can see between the one in my app, which works flawlessly, and the one in the example is that I bind the "checked" value to a property.

Basically, I handle the click event of the entire row (being in a table), and just set use the checkbox like so:

<CheckBox checked={this.props.selected} onClick={null} />

and the ripple seems to work perfectly here.

[amsheehan]

I believe this is actually the focus ring specified here

If you click outside of the checkbox, does the ring disappear? That is the expected behavior, and the behavior I see when I run the example locally.

[kminehart]

@amsheehan it does disappear indeed.

So maybe I'm actually not using the component correctly in my application 😅

[amsheehan]

@kminehart Sometimes the best solution is a remolding of expectations! 😄

[ianchanning]

@amsheehan Ah - then perhaps it's the Javascript that is incorrect! With the Javascript the ripple disappears, but as you correctly point out the checkbox is still focussed.

[amsheehan]

Iiiiiiiinteresting. I will bring this up with the team. Reopening.

[Garbee]

Looks like a bug in the react example to me. iirc from speaking with @traviskaufman before about Ripples, they should disappear (no matter how much I don't like it for a11y) when touched/clicked. Then when keyboard triggers are used on desktop is when they should persist.

The regular JS checkbox is working as I'd expect with what we currently have to work with. The React example simply seems wrong.

[ianchanning]

@Garbee I wouldn't say it's the react example - I witnessed the same behaviour in the CSS demo. My assumption was because the react example was using CSS.

I'm flip flopping in my opinions here - and agreeing with you @Garbee . Looking at a comparison with buttons, after you click a button it doesn't end up in the focussed state (see the screenshot below and also the video on the Buttons page), it goes back to the normal state even though it still has focus.

Also comparing to Material UI's implementation of buttons the 'focussed' action only happens with keyboard.

But of course this conflicts with the HTML standards meaning that after clicking you end up with the HTML 'focus' overlapping an 'unfocussed' button:

So I'd say you've got two sides...

Clears the ripple / focus after click:

1. MDC-Web JS checkbox
2. Material UI checkbox
3. Material guidelines buttons

Doesn't clear the ripple / focus:

1. MDC-Web CSS / react example
2. HTML

So the MDC-Web CSS is inconsistent and poor old HTML is going to be lonely.

[Garbee]

Our CSS-only is built for maximum a11y, which means the focus state remains. As per the CSS spec's for :focus. There is some movement going on where we can align better with the keyboard vs touch stuff later with a :focusring attribute perhaps, but that's still early days.

The JS is built for maximum-fidelity to the MD spec. Which is why in this case with checkbox the halo is removed even though focus is still there. IMO, we actually shouldn't do this for a11y and consistency, but it's the spec and until they budge that's the way it is.

I don't think our buttons are completely done yet. As (last I recall, haven't checked lately) the buttons don't have the focus state when JS and ripples are turned on. Which also would act the same as checkboxes do now, and not show after click/tap but only when focused by other means (like keyboard navigation.)

Material UI, and any other material implementation even Polymer, doesn't affect what we are doing here. The focus is on the Material Design specification's guidelines in text, falling back to the images when unclear text is provided.

[traviskaufman]

@ianchanning @kminehart I can't seem to reproduce this issue. I'm using FF v52 on OS X

What may be happening is that the builds of Firefox/Chromium you're using don't support CSS custom properties (although according to Can I Use, they should). Could you go to http://material-components-web.appspot.com/ripple.html and verify that you do _not_ see this?

If you do see this, we're clearly going to have to change that message ;)

[ianchanning]

@traviskaufman I have this in FF v52 in Windows - all the buttons keep their 'focussed' state after clicking in the CSS which agrees with @Garbee suggests. I don't get your red error message but I do get the following after clicking on the 'heart' button:

[traviskaufman]

Hmm, so that makes sense for the "- css only" version, but for the normal version you should see the ripple disappear after you interact with it.

I'm going to try reproing the original issue on FF on Linux next week and see what happens.

[ianchanning]

Sorry I don't think I've been very clear. The ripples do disappear for JavaScript (in FF on both Fedora and Windows). It's the CSS only where they don't.

I only opened this issue because of the difference between the JavaScript and the CSS.

I think this issue can be closed, because the difference is intentional.

[ianchanning]

Perhaps I should re-write the React demo to use JavaScript?

[anton-kachurin]

The demo is totally working after updating dependencies to the newest version.

@ianchanning I created a pull request for this, but if you want to do it manually:

cd material-components-web/framework-examples/react/
npm i -g npm-check-updates
ncu -u
npm i