PolymerElements / iron-selector

Manages a list of elements that can be selected
32 stars 55 forks source link

paper-listbox selected-item-changed is fired twice #170

Open TimvdLippe opened 6 years ago

TimvdLippe commented 6 years ago

From @yasar11732 on March 21, 2018 19:34

This is my package.json

{
  "name": "test-case",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "@polymer/paper-item": "^3.0.0-pre.11",
    "@polymer/paper-listbox": "^3.0.0-pre.11",
    "@polymer/paper-menu-button": "^3.0.0-pre.11",
    "@webcomponents/webcomponentsjs": "^1.1.0",
    "web-animations-js": "^2.3.1"
  }
}

This is my example test case

<!doctype html>
<html>
  <head>
    <script src="./node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
    <script src="./node_modules/web-animations-js/web-animations-next-lite.min.js"></script>
    <script type="module" src="./node_modules/@polymer/paper-menu-button/paper-menu-button.js"></script>
    <script type="module" src="./node_modules/@polymer/paper-listbox/paper-listbox.js"></script>
    <script type="module" src="./node_modules/@polymer/paper-item/paper-item.js"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            counter = 0;
            mylistbox.addEventListener("selected-item-changed", function(){
                counter++;
                console.log(counter + " " + mylistbox.selected);
            })
        });
    </script>
  </head>
  <body>

        <paper-menu-button noAnimations="true">
        <a slot="dropdown-trigger" alt="menu">Click Here For Menu</a>
        <paper-listbox slot="dropdown-content"  attr-for-selected="name" id="mylistbox" selected="alpha">
            <paper-item name="alpha">alpha</paper-item>
            <paper-item name="beta">beta</paper-item>
            <paper-item name="gamma">gamma</paper-item>
            <paper-item name="delta">delta</paper-item>
            <paper-item name="epsilon">epsilon</paper-item>
        </paper-listbox>
        </paper-menu-button>
  </body>
</html>

Select an item from the listbox and "selected-item-changed" will be fired two times, while it should be fired once.

Copied from original issue: Polymer/polymer#5159

TimvdLippe commented 6 years ago

Runnable JSBin: http://jsbin.com/gozixulagi/edit?html,console,output Seems to be an issue in iron-selector.