polymer 3.0 uncaught reference error on paper drop-down click

Question

after importing these:

import '@polymer/paper-dropdown-menu/paper-dropdown-menu.js';
import '@polymer/paper-listbox/paper-listbox.js';
import '@polymer/paper-item/paper-item.js';

The dropdown does not produce an error when left alone but when clicked on (will repeat on multiple clicks) it will produce it.

Uncaught ReferenceError: KeyframeEffect is not defined
    at HTMLElement.configure (fade-in-animation.js:32)
    at HTMLElement._configureAnimations (neon-animation-runner-behavior.js:42)
    at HTMLElement.playAnimation (neon-animation-runner-behavior.js:122)
    at HTMLElement._renderOpened (iron-dropdown.js:200)
    at HTMLElement.__openedChanged (iron-overlay-behavior.js:608)
    at HTMLElement.nextAnimationFrame (iron-overlay-behavior.js:634)

Here is the code I am trying to get working:

<paper-dropdown-menu label="Dinosaurs">
  <paper-listbox slot="dropdown-content" selected="1">
    <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>

I have tried importing neon-animations.js, neon-animation.js and neon-animated-behavior.js. Looking at similar issues from other questions their solutions are to import web-animations into their html file but my code is in a js file so that would not work.

as a note I am not using bower or meteor.

Answer 1

The Web Animations polyfill resolves the error you're seeing. Install it from npm:

npm i -S web-animations-js

Then, import it before using the paper-dropdown-menu, like this:

Firefox:

import 'web-animations-js/web-animations-next-lite.min.js';

demo 1

Chrome

<script src="./node_modules/web-animations-js/web-animations-next-lite.min.js"></script>

Note: Unfortunately in Chrome, the web-animations-next-lite.min.js file must be imported with a <script> tag (e.g., in index.html). This works in both Firefox and Chrome.

demo 2

Answer 2

You need to install the neon-animation element. Do this:

npm install --save @polymer/neon-animation

This will add the neon-animation dependency in your package.json and install it as well. Add the web-animations-js polyfill:

npm install --save web-animations-js

Once you are done installing these two. In the view which is responsible for the dropdown. Add the following code:

 import {NeonAnimationRunnerBehavior} from '@polymer/neon-animation/neon-animation-runner-behavior.js';

you will have to use the mixinbehavior so add this as an import:

 import {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js';

Now say the name of the class is MyView1 where you are rendering this dropdown do this:

class MyView1 extends mixinBehaviors([NeonAnimationRunnerBehavior], PolymerElement) {

Now we need to add the polyfill web-animations-js to the index.html just after the web-components-loader:

<script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script src="node_modules/web-animations-js/web-animations-next.min.js"></script>

This will definitely work!

Answer 3

in package.json "dependencies"

   "web-animations-js": "^2.3.1" 

in polymer.json "extraDependencies"

   "node_modules/web-animations-js/*.js"

in index.html AFTER webcomponents-loader script

   <script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
   <script src="node_modules/web-animations-js/web-animations-next.min.js"></script>

importing any of the web-animation-js polyfill versions as javascript modules directly in my element and building with Polymer CLI produced the topic error. Loading the web-animations-next.min.js polyfill version synchronously in index.html after webcomponents loader script fixed error for me