md-switch ripple turns on when window gets focus

[jsr6720]

Browser Chrome Canary: Version 51.0.2696.0 canary (64-bit)
Manufacturer............Hewlett-Packard
Model...................HP EliteDesk 800 G1 SFF
OS Version..............Windows 7

Steps to reproduce:

1. Open two chrome windows side by side.
2. Go to https://material.angularjs.org/latest/demo/switch in one of them
3. Click on any enabled switch element (must be switch, not associated label)
4. Click to focus on other browser window
5. click back on original window

See below image. "Switch 1" has ripple even though my mouse is not near the toggle.

[devversion]

This is actually not an issue, the focus on the switch is just restored by the browsers behavior.

[jsr6720]

@devversion Can you please re-open this issue. This ripple effect occurs even on the 'no ripple' directive

See screen shot

[devversion]

@jsr6720 Please explain, how we can reproduce that bug? I'm not able to reproduce it by your steps above.

[jsr6720]

Same steps as above. I just confirmed in Google Canary

1. Go to https://material.angularjs.org/latest/demo/switch
2. Click the TOGGLE next to "no Ink" label
3. Open new blank tab
4. Switch back to tab with demo in it.

[jsr6720]

@devversion do you still need more information? This is impacting our implementation of md-switch @paychex

[devversion]

@jsr6720 I will investigate today and look for the correct behavior. Thanks for explanation.

[devversion]

@jsr6720 Just investigated again at this issue. And it's still not an issue. It's also not a ripple, it's just a focus effect, which is added for Keyboard Interaction / a11y.

The focus effect is always showing, because the browser restores the focus back to the last element. (and that was obviously the switch).

[angryfatkid]

@devversion I can repro this with Chrome. It happens in both states. (Note: We also see this on button icons)

1. Set a switch
2. Create a new tab
3. Return to tab with switch

To further explain the issues, we are seeing this when our application pops a toast. Once the toast fades this effect happens.

[roytz]

As long as we don't have an option (or attribute) to set this focus off this is a bug.. I don't think we should see the background animation after switching windows..

[angryfatkid]

Here is behavior we are seeing on the icon button. Our users asked about it day one of release. It is really annoying. Basically anytime an action is taken this happens when that action is completed. For switches, checkboxes and for icon buttons so far).

[devversion]

@angryfatkid @roytz I can now reproduce your issue. I will provide a fix as soon as possible.

[devversion]

• The issue is, we're always applying the focus effect, when there was no click for 100ms. That means, if you switch the browser tabs, then there will be no click triggered on the button.. only a focus event (which adds the focus effect)

So, we need a way to detect the last interaction type. A PR is already pending - #7965, which means, that this issue is currently blocked.

cc. @ThomasBurleson

[angryfatkid]

@devversion Thanks!

[devversion]

This issue will be deprecated soon. The actual issue will be tracked in #7963

[ThomasBurleson]

This issue is closed as part of our ‘Surge Focus on Material 2' efforts.
For details, see our forum posting @ http://bit.ly/1UhZyWs.

[devversion]

Note: This has been solved in master now https://material.angularjs.org/HEAD/demo/switch