polymer-1.0shadow-dompolymer-2.xpolymer-starter-kit

Implementing dynamic dropdown menu in Polymer2.0. Works in Polymer1.0 but not in Polymer2.0


I've done the following using Polymer1. Doing the same in Polymer2.0 does not trigger the automatic dropdown menu of the button. Please could someone tell me what to do. It seems to have to do with Shadow DOM.

In Polymer1, the index.html has dom ='shadow', and a <content> tag instead of <slot>, and it gets to the dReadyDynamicRightMenuReady and triggers the dropdown. But in Polymer2.0 it also gets to this function, and does not trigger the dropdown.

<!-- this is in my-spxl Polymer2.0 -->
<paper-menu-button class="userMenuPositionClass">
<paper-icon-button icon="menu" class="dropdown-trigger"></paper-icon-button>
<paper-dropdown-menu class="dropdown-content">
    <iron-selector selected="[[choice]]" attr-for-selected="mychoice" role="navigation">
       <template id="" is="dom-repeat" items="[[dReadyDynamicRightMenuReady]]" as="menuOption">
           <paper-item>... </paper-item>
       </template>
    </iron-selector>
</paper-dropdown-menu>
</paper-menu-button>

<paper-button class=""> <img on-tap="openRightMenuFromPhoto" src="[[user.photoURL]]"> </paper-button>

Script: openRightMenuFromPhoto() { var usersMenuButton = this.$.userMenuIconId; usersMenuButton.click(function(event) { dReadyDynamicRightMenuReady = [ { "myChoice": "spx21", "myHref": "/spx21", "myOptionValue": "chats" } ]; return dReadyDynamicRightMenuReady; }) }


Solution

  • There are few mistakes in your code:

    1. Handle and firing events:

      Click listeners is inside a function. That will never be called. Put event listeners on ready() or connectedCallback. For more information about how to do that click here.

    2. Setting property value:

      Setting properties value inside function and returning it won't set it. Use this.property = value and notify the changes. OR, if it is an array/object use polymer array mutation methods.

    3. Read the documentation of paper-menu-button:

      Instead of class='dropdown-trigger' use slot as in documentation.

    Also, try to create a Minimal, Complete, and Verifiable example.