Error with paper dropdown menu

esd100 commented 7 years ago

Description

Custom element with paper-dropdown menu does nto display dropdown menu and gives multiple console violations and error on-tap event.

Error

[Violation] Added non-passive event listener to a scroll-blocking 'wheel' event. Consider marking event handler as 'passive' to make the page more responsive.
02:33:17.298 iron-dropdown-scroll-manager.html:217 [Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive.
02:33:17.298 iron-dropdown-scroll-manager.html:217 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive.
02:33:17.299 iron-dropdown-scroll-manager.html:217 [Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive.
02:33:17.304 neon-animation-runner-behavior.html:40 Couldnt play ( paper-menu-grow-width-animation ). TypeError: Cannot read property 'getBoundingClientRect' of undefined
    at HTMLElement.configure (paper-menu-button-animations.html:45)
    at HTMLElement._configureAnimations (neon-animation-runner-behavior.html:33)
    at HTMLElement.playAnimation (neon-animation-runner-behavior.html:93)
    at HTMLElement._renderOpened (iron-dropdown.html:236)
    at HTMLElement.__openedChanged (iron-overlay-behavior.html:541)
    at nextAnimationFrame (iron-overlay-behavior.html:566)
    at timeline.js:21
_configureAnimations @ neon-animation-runner-behavior.html:40
playAnimation @ neon-animation-runner-behavior.html:93
_renderOpened @ iron-dropdown.html:236
__openedChanged @ iron-overlay-behavior.html:541
nextAnimationFrame @ iron-overlay-behavior.html:566
(anonymous) @ timeline.js:21
requestAnimationFrame (async)
window.requestAnimationFrame @ timeline.js:19
__onNextAnimationFrame @ iron-overlay-behavior.html:564
_openedChanged @ iron-overlay-behavior.html:269
_openedChanged @ iron-dropdown.html:226
runObserverEffect @ property-effects.html:187
runEffectsForProperty @ property-effects.html:133
runEffects @ property-effects.html:101
_propertiesChanged @ property-effects.html:1539
_flushProperties @ property-accessors.html:496
_invalidateProperties @ property-effects.html:1418
_setProperty @ property-effects.html:1404
Object.defineProperty.set @ property-accessors.html:392
open @ iron-overlay-behavior.html:206
open @ paper-menu-button.html:397
toggle @ paper-menu-button.html:384
handler @ template-stamp.html:92
_fire @ gestures.html:514
forward @ gestures.html:809
click @ gestures.html:790
_handleNative @ gestures.html:328
02:33:17.305 neon-animation-runner-behavior.html:40 Couldnt play ( paper-menu-grow-height-animation ). TypeError: Cannot read property 'getBoundingClientRect' of undefined
    at HTMLElement.configure (paper-menu-button-animations.html:23)
    at HTMLElement._configureAnimations (neon-animation-runner-behavior.html:33)
    at HTMLElement.playAnimation (neon-animation-runner-behavior.html:93)
    at HTMLElement._renderOpened (iron-dropdown.html:236)
    at HTMLElement.__openedChanged (iron-overlay-behavior.html:541)
    at nextAnimationFrame (iron-overlay-behavior.html:566)
    at timeline.js:21

Element

<link rel="import" href="../../bower_components/polymer/polymer.html">

<link rel="import" href="../../bower_components/neon-animation/web-animations.html">
<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="../../bower_components/paper-listbox/paper-listbox.html">
<link rel="import" href="../../bower_components/paper-item/paper-item.html">

<!-- Ensure Web Animations polyfill is loaded since neon-animation 2.0 doesn't import it -->
<script src="../../bower_components/webcomponentsjs/webcomponents-lite.js"></script>

<dom-module id="nml-categories">
  <template>
    <style>
      :host {
        display: block;
      }

      #Categories {
        width: 100%;
      }

      #Categories paper-item {
        background-color: #E00122;
        color: #FFFFFF
      }
    </style>

    <div>
      <paper-dropdown-menu id="Categories" name="Category" label="Choose a Topic Category">
        <paper-listbox label="Category" slot="dropdown-content" class="dropdown-content">
          <template is="dom-repeat" items="[[categories]]">
            <paper-item on-tap="_categoryHandler">{{item}}</paper-item>
          </template>
        </paper-listbox>
      </paper-dropdown-menu>
    </div>
  </template>

  <script>
    class NmlCategories extends Polymer.Element {
      static get is() {
        return "nml-categories";
      }

      static get properties() {
        return {
          category: {
            type: String,
            notify: true
          },

          categories: {
            type: Array,
            value: [
              "X",
              "Y",
              "Z"
            ],
            notify: true
          }
        };
      }

      _categoryHandler(e) {
        var category = this.category = Polymer.dom(e).localTarget.textContent;
      }
    }

    window.customElements.define(NmlCategories.is, NmlCategories);
  </script>
</dom-module>

Browsers Affected

[x] Chrome
[ ] Firefox
[ ] Safari 9
[ ] Safari 8
[ ] Safari 7
[ ] Edge
[ ] IE 11
[ ] IE 10

esd100 commented 7 years ago

Is anyone working on polymer paper-dropdown-menu?

milesje commented 7 years ago

I would remove the on-tap for the paper-item and then add a listener for the selected-item-changed that is fired by the paper-dropdown-menu

valdrinkoshi commented 7 years ago

As a general good practice, elements should not load polyfills (eg web animations, web components), that should be done in the app (eg your index.html).

In this element, you're importing neon-animation/web-animations.html, which assumes you have web-animations-js between your dependencies.

My suggestion would be to update your bower.json to include this dependency, and load both web animations and web components polyfill in your index.html, not in the custom element.

esd100 commented 7 years ago

Thanks for your help! I'll test these solutions out!

esd100 commented 7 years ago

As it turns out, I made several changes which resulted in the solution the animation problem. Although I'm not exactly sure which change was the critical component to fix the break, I will put them down as record of possible things to check.

As it turns out, I made no changes to on-tap or adding an event-listener for paper-dropdown-menu prior to getting it to work, so I can safely say that those changes were not critical to the function
I ran bower list | grep -v '│ ' to show versions of my dependencies and everything looked ok
I checked my bower.json file and saw that there were several saved resolutions which I had set back awhile ago and had forgotten about, so I deleted those resolutions and deleted my components folder
I also noticed with @valdrinkoshi help that I was missing the dependency "web-animations-js": "web-animations/web-animations-js#^2.2", so I added that to my dependencies
I also noticed that I was missing the paper-input dependency, which was not an item in the component listed above but an item in the parent component which was a form, so I added that
I also deleted the <link rel="import" href="../../bower_components/neon-animation/web-animations.html"> from the components and just added the script of the web-animations-js polyfill into my index.html
Reran bower update

With these changes the animations and they worked. Thanks for the help @valdrinkoshi

PolymerElements / paper-dropdown-menu