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

[jiettu]

Hi, 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>

[valdrinkoshi]

Hi @jiettu, please take a look at how to setup annotated event listeners here https://www.polymer-project.org/1.0/docs/devguide/events#annotated-listeners In your case, you need to have something like:

<paper-dropdown-menu id="fromMenu" label="From Account" on-paper-dropdown-close="fromAccountChanged"> 

...

fromAccountChanged: function() {
  console.log(this.$.fromMenu.selectedItem);
}

You can also listen for the iron-select event, which will contain the selected item in the detail (aka event.detail.item will be the newly selected item) http://jsbin.com/reseva/2/edit?html,output Closing this, let me know if the problem persists (possibly with a jsbin or code snippet), and I'll reopen this ;)