search

PolymerElements / iron-dropdown

An unstyled element that works similarly to a native browser select
https://www.webcomponents.org/element/PolymerElements/iron-dropdown
34 stars 50 forks source link

2.1.0 breaks existing scrolling listeners on firefox #149

Open giona69 opened 6 years ago

giona69 commented 6 years ago

Description

I register a scrolling listener on the main app I click on iron-dropdown powered element (ex: paper-menu-button) main listener do not receive events any more

Expected outcome

main listener will continue receiving events

Actual outcome

main listener do not receive events any more

Steps to reproduce

start polymer starter kit in the ready method register the event listener: 

                    this.scrollTarget = this.$.layout.shadowRoot.querySelector('#contentContainer');

                    this.scrollTarget.addEventListener('scroll', () => {
                        this.scrollPos = this.scrollTarget.scrollTop;

                        if ((this.scrollTarget.scrollHeight - this.scrollPos - this.scrollTarget.offsetHeight) < 400) {
                            Utils.log('MAIN', 'FIRE! ' + this.fireThreshold);
                            this.fireThreshold = true;
                        }
                    });

place a paper-menu-button wherever you want

                    <paper-menu-button id="menul" horizontal-align="right">
                        <paper-fab mini id="langfab" slot="dropdown-trigger" src="[[pngUrl]]" on-click="flagClick"></paper-fab>
                        <paper-listbox slot="dropdown-content" selected="{{menulanguage}}" class="listmenu">
                            <paper-icon-item class="filteritem">
                                <iron-icon src="images/it.png" class="flagicon" slot="item-icon"></iron-icon>
                                <span>[[locale.italian]]</span>
                            </paper-icon-item>
                            <paper-icon-item class="filteritem">
                                <iron-icon src="images/en.png" class="flagicon" slot="item-icon"></iron-icon>
                                <span>[[locale.english]]</span>
                            </paper-icon-item>
                            <paper-icon-item class="filteritem">
                                <iron-icon src="images/es.png" class="flagicon" slot="item-icon"></iron-icon>
                                <span>[[locale.spanish]]</span>
                            </paper-icon-item>
                            <paper-icon-item class="filteritem">
                                <iron-icon src="images/br.png" class="flagicon" slot="item-icon"></iron-icon>
                                <span>[[locale.brazilian]]</span>
                            </paper-icon-item>
                            <paper-icon-item class="filteritem">
                                <iron-icon src="images/ru.png" class="flagicon" slot="item-icon"></iron-icon>
                                <span>[[locale.russian]]</span>
                            </paper-icon-item>
                            <paper-icon-item class="filteritem">
                                <iron-icon src="images/uk.png" class="flagicon" slot="item-icon"></iron-icon>
                                <span>[[locale.ukrainian]]</span>
                            </paper-icon-item>
                            <paper-icon-item class="filteritem">
                                <iron-icon src="images/ro.png" class="flagicon" slot="item-icon"></iron-icon>
                                <span>[[locale.romanian]]</span>
                            </paper-icon-item>
                            <paper-icon-item class="filteritem">
                                <iron-icon src="images/cu.png" class="flagicon" slot="item-icon"></iron-icon>
                                <span>[[locale.cuban]]</span>
                            </paper-icon-item>
                            <paper-icon-item class="filteritem">
                                <iron-icon src="images/ve.png" class="flagicon" slot="item-icon"></iron-icon>
                                <span>[[locale.venezuelan]]</span>
                            </paper-icon-item>
                            <paper-icon-item class="filteritem">
                                <iron-icon src="images/do.png" class="flagicon" slot="item-icon"></iron-icon>
                                <span>[[locale.dominican]]</span>
                            </paper-icon-item>
                            <paper-icon-item class="filteritem">
                                <iron-icon src="images/pt.png" class="flagicon" slot="item-icon"></iron-icon>
                                <span>[[locale.portoguese]]</span>
                            </paper-icon-item>
                            <paper-icon-item class="filteritem">
                                <iron-icon src="images/fr.png" class="flagicon" slot="item-icon"></iron-icon>
                                <span>[[locale.french]]</span>
                            </paper-icon-item>
                            <paper-icon-item class="filteritem">
                                <iron-icon src="images/de.png" class="flagicon" slot="item-icon"></iron-icon>
                                <span>[[locale.german]]</span>
                            </paper-icon-item>
                        </paper-listbox>
                    </paper-menu-button>

start the application locally with polymer serve

start scrolling click on the paper-menu-button start scrolling again verify scrolling doesn't fire anymore on the main event only in FIREFOX

for a workaround I reverted to 2.0.0

Browsers Affected

mvtorres commented 6 years ago

Thanks, the workaround fixed the issue for me.

This issue also affects Edge.