polymer 3.0 uncaught reference error on paper drop-down click

paper dropdown button
paper item in polymer
polymer paper multi select
paper label polymer
paper-dropdown-menu position
react native-paper dropdown
paper-listbox properties
paper-listbox scroll

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.

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!

PolymerElements/paper-dropdown-menu, When I click on the dropdown: fade-in-animation.js:32 Uncaught ReferenceError: KeyframeEffect is not defined. Using Polymer 3, in particular: @polymer/polymer: ^3.1.0 @polymer/paper-dropdown-menu: 3.0.1. Is there any  To get the polymer library (or any of the core or paper elements that use it), you can use a command called 'bower'. You can also reference it on some cdn, I expect, though (iinm) there is no 'official' one.

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

PolymerElements/paper-dropdown-menu, 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:  angular karma unit test error: Uncaught RangeError: Maximum call stack size exceeded. Posted on July 31, 2019 by lietutis.

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

PolymerElements/paper-menu-button, @polymer/paper-menu-button. 3.0.1. An element that allows composing a trigger and content as a dropdown menu. Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Neon-animations are oficially deprecated, anyhow you can still download from https://www.npmjs.com/package/@polymer/neon-animation

To import'em in your polymer3 project from npm:

npm install --save @polymer/neon-animation

Diff - a35c6f05d7923eb990a5c08798b8d83aa43418a3^!, Example: Error thrown when calling `appendChild` on Polymer element --> + +##​## Live Demo +<! + +- Remove importHref from 3.0 ([commit](https://github.com​/Polymer/polymer/commit/fd416a21)) + +## + +- Fix references to js files instead of html files + +- one click triggers two popup of paper-dropdown-menu​  I have the same issue Chrome Version 43.0.2357.125 (64-bit) on linux. apart from the Uncaught TypeError: Cannot set property 'right' of undefined error, I also get, Uncaught TypeError: Polymer.Gestures.findOriginalTarget is not a function

With regards to the previous answer by MKant, if you have an ASP.net site, you will need to add the last two script tags for the polyfills into your cshtml file or whichever file is calling your Polymer element. If you add them into your module template code, it will not work.

How can I auto minify .js files to .min.js when saving the .js version in , Object; 2798 | gcc -mpreferred-stack-boundary option; 4306 | polymer 3.0 uncaught reference error on paper drop-down click; 7059 | Empty arrays seem to​  About the Polymer Project As front-end engineers in the Chrome team, our mission is to make the web better. Documentation licensed under CC BY 3.0.

javascript detect click outside element Code Example, Get code examples like "javascript detect click outside element" instantly right from //Do something click is outside specified element. 7 Attempted import error: 'uuid' does not contain a default export (imported as 'uuid'). is pi javascript · how can we take selected index value of dropdown in javascript  JavaScript can be a nightmare to debug: Some errors it gives can be very difficult to understand at first, and the line numbers given aren’t always helpful either. Wouldn’t it be useful to have a list where you could look to find out what they mean and how to fix them? Below is a list of the strange errors in JavaScript.

Web Libraries in Jars, angularjs-dropdown-multiselect, org.webjars, angularjs-dropdown-multiselect @polymer/iron-icon, org.webjars.bower, github-com-polymerelements-iron- character-reference-invalid, org.webjars.bower, character-reference-invalid, 1.1.2 df-merge-validation-errors, org.webjars.bower, df-merge-validation-errors, 0.1.​1. Downgrading to Polymer 2.3.0 resolves the issue. Uncaught TypeError: Cannot read property &amp;#39;parentNode&amp;#39; of undefined at process Skip to content

@notwaldorf paper-dropdown-menu is still broken on IE for me. I have dropdowns in paper-header-panel, paper-toolbar and paper-dialog and no one is working fine, maybe #50 fixes the problem only when the dorpdown is not inside other elements? Please reopen, thanks.

Comments
  • adding noink no-animations to the dropdown menu tag fixes the problem but that is a temporary fix as I do want animations later.
  • unfortunately I get this error when trying to use the imports: Uncaught (in promise) TypeError: Cannot set property 'true' of undefined at scope.js:20 at scope.js:20
  • The glitch demo also has the TypeError that @Taka mentioned. I am facing the same issue in my project.
  • @tony19 you can see the stack trace in your glitch (Chrome 69). It works in Firefox!
  • @kpg It seems the polyfill must be loaded from a <script> tag in Chrome.
  • @tony19 yes, thanks and the import must be removed from the component for it to work in Chrome, so I suggest that demo 1 is not required. As you say, just using the script tag without the import works in both Chrome and Firefox
  • I have already tried to import the neon-animation.js file, would this be any different?
  • no, you need the web-animations.js package for the polyfil