paper-dropdown-menu is not working after upgrade to Polymer 2.0

[notwaldorf]

From @DominicWrege on April 15, 2017 10:50

After the upgrade from Polymer v1.4 to v2.0 the paper-dropdown-menu stoped working. I am using it inside a paper-dialog. I have to use the paper-listbox instead of the paper-menu because there is no 2.0-preview branche for it. I checked the dropdown-menu with the web inspector and the list wasn't empty. It seems to me that the click event does not his job. I am getting no console Error.

Code

<paper-dropdown-menu label="Gruppenbuchstabe">
    <paper-listbox class="dropdown-content">
       <paper-item>This</paper-item>
       <paper-item>is</paper-item>
       <paper-item>not</paper-item>
       <paper-item>working</paper-item>
   </paper-listbox>
</paper-dropdown-menu>

Demo

Copied from original issue: Polymer/paper-dropdown-menu#79

[notwaldorf]

/cc @valdrinkoshi

[bmodeprogrammer]

@notwaldorf what error is outputted on console? Because I had that problem and was a problem of web-animations-js 2.2.3 version. So, I downgrade the web-animation to 2.2.2 and worked. "web-animations-js": "web-animations/web-animations-js#2.2.2"

[DominicWrege]

@bmodeprogrammer like I said, no error outputted on the console. I am using "web-animations-js": "web-animations/web-animations-js#2.2.2" as well.

[bmodeprogrammer]

very estrange, I'm using this dependencies and is working perfectly:

"dependencies": {
    "polymer": "Polymer/polymer#^2.0.0-rc.1",
    "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0-rc.4",
    "paper-dropdown-menu": "PolymerElements/paper-dropdown-menu#2.0-preview",
    "paper-listbox": "PolymerElements/paper-listbox#2.0-preview",
    "paper-item": "PolymerElements/paper-item#2.0-preview",
    "web-animations-js": "web-animations/web-animations-js#2.2.2",
    "gold-phone-input": "2.0-preview"
  }

[DominicWrege]

@bmodeprogrammer I am using "polymer": "Polymer/polymer#^2.0.0-rc.3" but when I do bower install I am getting this:

8) polymer#^2.0.0-rc.3 which resolved to 2.0.0-rc.5 and is required by app-layout#b221f9956a, FH Stundenplan, platinum-sw#be20b8c2cc
9) polymer#^2.0.0-rc.2 which resolved to 2.0.0-rc.5 and is required by iron-list#38c16cc417 

Here is my bower file. bower.json.txt

[bmodeprogrammer]

@DominicWrege I did the test, and I put your bower file, and choosing the dependencies conflicts, I choose all to 2.0-preview. And with this code works perfectly: But if you do not put the slot attribute does not work. Check if you have the slot attribute on paper-listbox

<paper-dropdown-menu label="Dinosaurs">
      <paper-listbox slot="dropdown-content" class="dropdown-content">
        <paper-item>allosaurus</paper-item>
        <paper-item>brontosaurus</paper-item>
        <paper-item>carcharodontosaurus</paper-item>
        <paper-item>diplodocus</paper-item>
      </paper-listbox>
    </paper-dropdown-menu>

Hope that can help you

[DominicWrege]

@bmodeprogrammer thank you so much. I needed to add the slot attribute. Now it's works!

[tupaje1]

I am also having the issues with the animations for paper-dropdown-menu element. I installed the following components:

• polymer#2.0.0-rc.7
• paper-dropdown-menu#2.0-preview
• paper-listbox#2.0-preview
• paper-item#2.0-preview
• neon-animation#2.0-preview

The web-animations-next-lite.min.js is not included after installing neon-animations which is a dependence for _../bowercomponents/neon-animation/web-animations.html. I see that neon-animation is now deprecated for polymer 2.0.

[valdrinkoshi]

Yes, you'll have to import the polyfill, see more info here https://github.com/PolymerElements/paper-dropdown-menu/blob/2.0-preview/README.md#changes-in-20

[tupaje1]

@valdrinkoshi Thanks for the link. I saw in the example how to include web-animations-js, version web-animations-js#2.2.5 works for me.

[edwinyumakiuchi]

Hi @valdrinkoshi , is there a paper-dropdown-menu version that is compatible with polymer 1.x? I am getting the same issue described in this ticket but with polymer#1.11.0.

[dman777]

I having this issue in Polymer 1.* also.

[dman777]

For anyone using Polymer 1.* .... If you place class="dropdown-content" in paper-listbox, and use paper-dropdown-menu v 1.5.1, then your dropdown will work.

          <paper-dropdown-menu
                label="foobar">
                <paper-listbox class="dropdown-content">
                  <paper-item>foo</paper-item>
                  <paper-item>foo</paper-item>
                  <paper-item>foolllllllllllllllllllllll</paper-item>
                  <paper-item>foo</paper-item>
                  <paper-item>foo</paper-item>
                </paper-listbox>
              </paper-dropdown-menu>

[dman777]

Any updates on getting 2.0 working? I need the vertical-offset feature that is not available in the working 1.5.1.