Search code examples
javascripthtmlpolymer

Can't fire iron-select event on paper-listbox

I am trying to fire a simple listen function on an iron-select event based on the selection of a value in a paper-dropdown-menu.

Here is my HTML's head

<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>My App</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<link rel="stylesheet" type="text/scss" href="./main.scss" />
<script src="./js/app.js"></script>
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/neon-animation/neon-animation.html"/>
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/neon-animation/web-animations.html"/>
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/paper-dropdown-menu/paper-dropdown-menu.html"/>
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/paper-item/paper-item.html"/>
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/paper-listbox/paper-listbox.html"/>
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/paper-input/paper-input.html"/>
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/iron-icon/iron-icon.html"/>
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/iron-icons/iron-icons.html"/>
</head>

My HTML's body

<div class="assign-country">
  <paper-dropdown-menu on-iron-select="listen" label="Country">
    <paper-listbox on-iron-select="listen" slot="dropdown-content" class="dropdown-content" selected="1">
      <paper-item>France</paper-item>
      <paper-item>Germany</paper-item>
      <paper-item>Spain</paper-item>
      <paper-item>England</paper-item>
    </paper-listbox>
  </paper-dropdown-menu>
</div>

And my JS function

function listen () {
  console.log('coucou');
}
Solution

  • The on-EVENTNAME="METHODNAME" is Polymer-specific syntax to setup an annotated event listener, but these annotations only work inside a Polymer template (inside a <dom-module> or <dom-bind>).

    Given the example code and your intention to avoid Polymer syntax, you should setup the event listeners manually with a reference to the element. The same iron-select event fires on both <paper-dropdown-menu> and the inner <paper-listbox>, so you only need to listen to the iron-select event on one of them. Here's one solution:

    1. Assign an ID to <paper-dropdown-menu> so that it can easily be referenced in JavaScript (with Document.getElementById()).

      <paper-dropdown-menu id="mydropdown">

    2. Add an event listener (with EventTarget.addEventListener()) to the <paper-dropdown-menu> reference:

      const dropdown = document.getElementById('mydropdown');
dropdown.addEventListener('iron-select', e => listen(e));


    const dropdown = document.getElementById('mydropdown');
dropdown.addEventListener('iron-select', e => listen(e));

function listen(e) {
  console.log('iron-select', e);
  document.getElementById('output').innerText = e.detail.item.innerText;
}
    <head>
  <base href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/">
  <script src="webcomponentsjs/webcomponents-loader.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="paper-dropdown-menu/paper-dropdown-menu.html">
  <link rel="import" href="paper-listbox/paper-listbox.html">
  <link rel="import" href="paper-item/paper-item.html">
  <link rel="import" href="neon-animation/web-animations.html">
</head>
<body>
  <paper-dropdown-menu id="mydropdown" label="Country">
    <paper-listbox slot="dropdown-content" class="dropdown-content" selected="1">
      <paper-item>France</paper-item>
      <paper-item>Germany</paper-item>
      <paper-item>Spain</paper-item>
      <paper-item>England</paper-item>
    </paper-listbox>
  </paper-dropdown-menu>
  <pre id="output"></pre>
</body>