Search code examples
javascripthtmlpolymerpaper-elementspolymer-1.0

paper-ripple is listening to click events outside of its container

I'm trying to create a simple ripple effect for a card in my app. It works great, but it is also responding to mouse events outside of its container:

enter image description here

Code looks like this:

<dom-module>
    ...
    <template>
        ...
        <paper-material>
            <div class="wrapper">...</div>
            <paper-ripple></paper-ripple>
        </paper-material>
        ...
    </template>
</dom-module>

I don't quite see why it is behaving this way. Any idea?

Added

This whole page is an independant dom-module. Apparently using paper-ripple in such a fashion causes this to happen. How do I fix this?

Solution

  • UPDATE (15 June 2015): paper-ripple 1.0.1 was released on 11 June 2015, which includes the PR fixing this problem, making the fixes recommended in this answer obsolete. Simply update bower.json to bind to PolymerElements/paper-ripple#^1.0.1.

    This is a symptom of the very same bug that plagued another user on SO. The paper-ripple elements are targeting the wrong host element.

    A fix has been merged into the official repository, but isn't yet in any release. To use it now, simply use the master branch as your version in bower.json.

    I would recommend keeping tabs on the releases and use an actual version as your dependency instead of the master branch as soon as possible.