search

PolymerElements / paper-button

A button à la Material Design
https://www.webcomponents.org/element/PolymerElements/paper-button
138 stars 64 forks source link

No ripple animation on first click (after page load) when using native shadow dom #63

Closed neon64 closed 8 years ago

neon64 commented 8 years ago

The first time a click a <paper-button>, there is no ripple. The next time I click it there is. It seems this only exists when I use Chrome's native shadow DOM (using ?dom=shadow).

This can be tested by loading the demo page for this element using the native shadow DOM.

neon64 commented 8 years ago

I have managed to track this down to https://github.com/PolymerElements/paper-behaviors/blob/master/paper-ripple-behavior.html#L84. When the actual shadow DOM is used, the Node.contains test fails because <paper-button ....> is not inside #shadow-root.

If I change that line:

if (domContainer.contains(/** @type {Node} */(target))) {

To this:

if ((domContainer.host != undefined && domContainer.host == target) || domContainer.contains(/** @type {Node} */(target))) {

Then it appears to work on the first click. However I feel that that is a rather 'hacky' solution.

neon64 commented 8 years ago

Mmm, this doesn't work if the target is a an element (eg: <iron-icon>) inside the <paper-button> not the button itself

cdata commented 8 years ago

Thanks for the thorough assessment of the problem. I will take a look.

keanulee commented 8 years ago

Can't seem to reproduce this issue anymore - going to close this issue. Feel free to reopen if you still see it.