Skip to content
This repository has been archived by the owner on Dec 19, 2024. It is now read-only.

Crashes when clicked: KeyframeEffect is not defined #305

Open
1 of 2 tasks
floribon opened this issue Nov 1, 2018 · 6 comments
Open
1 of 2 tasks

Crashes when clicked: KeyframeEffect is not defined #305

floribon opened this issue Nov 1, 2018 · 6 comments

Comments

@floribon
Copy link

floribon commented Nov 1, 2018

I'm getting this error even when using the exact same HTML as given in the demo:

<html>
  <head>
    <script type="module">
      import '@polymer/paper-dropdown-menu/paper-dropdown-menu.js';
      import '@polymer/paper-item/paper-item.js';
      import '@polymer/paper-listbox/paper-listbox.js';
    </script>
  </head>
  <body>
    <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>
  </body>
</html>

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 workaround to have this working? Where is KeyframeEffect defined? Thanks

Note that I don't need any specific transition, just the default look and feel of paper-dropdown.

Browsers Affected

  • Chrome
  • not tested on others
@aravindnc
Copy link

@floribon
Do npm install web-animations-js
Then include <script src="./node_modules/web-animations-js/web-animations-next-lite.min.js"></script>
after webcomponents-loader in the html file.

@floribon
Copy link
Author

@aravindnc ideally I wouldn't change the containing HTML page as I'm only producing a JS file of my web component.

So there is no way for it to be self contained? (except for webcomponents-loader which make sense to be an external file for polyfils)

@matthinea
Copy link

If you're only producing a JS file of your web component, you should be able to just import that JS file.

(In Rails importing web-animations-next-lite in application.js worked for me.)

$ yarn add web-animations-js

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

@floribon
Copy link
Author

@mnd-dsgn thanks, I tried that but when I import that file I get a

TypeError: Cannot set property 'true' of undefined

This is because that script uses a global this which in my case is some webpack internals. Replacing this with window in web-animations-next-lite seems to fix the problem.

Would that qualify for a bug? No other dependencies that I've seen relies on a global this.

@leegee
Copy link

leegee commented Jan 25, 2019

This is because that script uses a global this which in my case is some webpack internals. Replacing this with window in web-animations-next-lite seems to fix the problem.

Would the allowTopLevelThis from babel-plugin-transform-modules-commonjs ? Not ideal....

inferno-chromium added a commit to google/clusterfuzz that referenced this issue May 20, 2019
@inferno-chromium
Fix security severity listbox not working.
6340e6c 
This was due to missing slot="dropdown-content".

Also, fixed a console exception due to
PolymerElements/paper-dropdown-menu#305
We don't use animations in other places and disable it. This was
the only call site remaining.

Fixes #453
@inferno-chromium inferno-chromium mentioned this issue May 20, 2019
Merged
inferno-chromium added a commit to google/clusterfuzz that referenced this issue May 20, 2019
@inferno-chromium
Fix security severity listbox not working. (#469)
c0db897 
This was due to missing slot="dropdown-content".

Also, fixed a console exception due to
PolymerElements/paper-dropdown-menu#305
We don't use animations in other places and disable it. This was
the only call site remaining.

Fixes #453
@evayde
Copy link

evayde commented Jun 20, 2019

Solutions above didnt work for me. Turned the animations off and wrote my own stuff. If that could also work for you just opt-out using the no-animations attribute <paper-dropdown-menu label="..." no-animations>

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@aravindnc @leegee @floribon @matthinea @evayde