CODEWITHSUNDEEP
polymer
Alexander Ciesielski
Alexander Ciesielski

Reputation: 10824

Polymer: Buttonclick triggers parent container click-event

I'm trying to develop a collapsible list based on Google Inbox in Polymer.

I've created a list of polymer-elements, where each element is a paper-material with an iron-collapse inside.
The iron-collapse contains data and a couple of paper-buttons.

I need to show/hide the <iron-collapse> element, when clicking the parent paper-material.

This works really well, but unfortunately that event also fires after clicking a paper-button e.g. Send-Button inside the iron-collapse.

I tried adding event.stopPropagation() to the child's button handler, but the iron-collapse still collapses, when clicking the button.

Any ideas?

Code for parent container:

<paper-material id="papercontainer" elevation="1" class="container padded" animated style="border-radius:4px;">
   <div class="container">
        <div class="container flex-start-justified">
            <div class="flexchild">
                <h4 class="smaller-margin">Bill Gates</h4>
                <p class="smaller-margin">[email protected]</p>
                <p class="paper-font-caption smaller-margin">Date received: 01/01/2015</p>
            </div>
            <p>
                    <paper-button raised on-click="send">Send</paper-button>
            </p>
        </div>

<!--Code for iron-collapse (child): -->

        <div class="container flex-horizontal">
                <iron-collapse id="collapse" class="flexchild">
                    <div class="flexchild collapse-content" style="margin-top:10px;">
                         <paper-button>Edit Mail</paper-button>

                     </div>
                 </iron-collapse>
        </div>

    </div>
</paper-material>

Javascript:

Polymer({           
        is: 'zapytania-result-element2',

        toggle: function() {
            this.$.collapse.toggle();
        },

        listeners: {
            'tap': 'regularTap'
        },

        regularTap: function(e) {
            console.log('toggle iron-collapse');
            if(this.$.collapse.opened) {
                this.$.collapse.hide();
                this.$.papercontainer.elevation = 1;
            } else {
                this.$.collapse.show();
                this.$.papercontainer.elevation = 5;
            }
        },
       send: function() {
           sendMail();
       }
}

Upvotes: 0

Views: 598

Answers (1)

Alexander Ciesielski
Alexander Ciesielski

Reputation: 10824

I have followed the Events Tutorial from https://www.polymer-project.org/1.0/docs/devguide/events.html

Per my understanding 'tap' makes the whole element listen for the tap event.

After removing that handler and assigning my own on-click event handler to the parent paper-material container and calling e.stopPropagation() at the end of my child's button event it works.

Upvotes: 2

Related Questions