How can I handle paper-dropdown-close event in my custom polymer element

Question

I am creating a custom element, where I have used paper-dropdown--menu. I want to handle 'selected item change' event. But it seems that somehow it is unable to locate the event handler. What am I doing wrong? My code:

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="../../bower_components/paper-item/paper-item.html">
<link rel="import" href="../../bower_components/paper-listbox/paper-listbox.html">
<link rel="import" href="../../bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<dom-module id="fund-transfer">
    <template>
        <style>
        :host {
            padding: 20px;
        }
        </style>
        <iron-ajax auto url={{accountServiceUrl}} handle-as="json" last-response="{{accounts}}"></iron-ajax>
        <div>
            <paper-dropdown-menu label="From Account" paper-dropdown-close="accountChanged(selectedItem)">
                <paper-listbox class="dropdown-content">
                    <template is="dom-repeat" items="[[accounts]]">
                        <paper-item>{{item.name}} - {{item.number}} </paper-item>
                    </template>
                </paper-listbox>
            </paper-dropdown-menu>
        </div>
        <div>
            <paper-dropdown-menu label="To Account" paper-dropdown-close="accountChanged(selectedItem)">
                <paper-listbox class="dropdown-content">
                    <template is="dom-repeat" items="[[accounts]]">
                        <paper-item>{{item.name}} - {{item.number}}</paper-item>
                    </template>
                </paper-listbox>
            </paper-dropdown-menu>
        </div>
    </template>
    <script>
    Polymer({
        is: 'fund-transfer',
        properties: {
            accountServiceUrl: String
        },
        ready: function() {
        },
        accountChanged: function(selectedItem) {
            alert('zinga');
            console.log('heehaa');
            console.log(selectedItem);

        }
    });
    </script>
</dom-module>

SG_ SG_ · Accepted Answer · 2016-03-24T03:48:02

You are missing the on in Polymer's Annotated event listener setup, you have to use on-event.

So use on-paper-dropdown-close="accountChanged" instead of paper-dropdown-close="accountChanged(selectedItem)", And then for the selected-item details You may have to use value or selectedItemLabel attributes of paper-dropdown-menu from the accountChanged function.

Here is a working demo

<!DOCTYPE html>
<html>  
<head>

  <title>Paper-DropDown-Menu</title>
  
  <script src="https://rawgit.com/webcomponents/webcomponentsjs/master/webcomponents.js"></script>
  
  <base href="https://cdn.rawgit.com/download/polymer-cdn/1.2.3/lib/">
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="paper-listbox/paper-listbox.html">
  <link rel="import" href="paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="paper-item/paper-item.html">
  
</head>
<body class="fullbleed">

<custom-dropdown></custom-dropdown>

<dom-module is="custom-dropdown">
<template>
  <!-- use on-paper-dropdown-close OR on-iron-select -->
<paper-dropdown-menu label="Time" on-paper-dropdown-close="itemSelected">
  <paper-listbox class="dropdown-content" selected="0">
    <paper-item>Select One</paper-item>
    <paper-item>Select two</paper-item>
    <paper-item>Select Three</paper-item>
  </paper-listbox>
</paper-dropdown-menu>

</template>

<script>
Polymer({
  is: 'custom-dropdown',
  itemSelected : function(e){
    alert(" closed");
  }
});
</script>

</dom-module>

</body>
</html>

on-iron-select="accountChanged" can also be used, In this case on-iron-select would be a good option, so that you can easily access the selected-item details from the event.detail.item.

How can I handle paper-dropdown-close event in my custom polymer element

1 Answers