search

googlearchive / paper-menu

A Material Design menu
https://www.webcomponents.org/element/PolymerElements/paper-menu
27 stars 48 forks source link

Data binding issue with recursive custom element using submenus? #115

Open xwatkins opened 7 years ago

xwatkins commented 7 years ago

Description

I have been writing a custom element which transform a non-binary tree data structure into nested paper-submenus, using component-based recursion. However, it seems there is an issue either with data binding or the attachment of DOM nodes as it doesn't work past the first level.

Expected outcome

For the following data:

[{"label":"item 1","members":[{"label":"item 2","members":[{"label":"3"},{"label":"4"}]}]},{"label":"item 5"}]

I expect the resulting structure to be:

<paper-menu>
   <paper-submenu>
     <paper-item>Item 1</paper-item>
     <paper-menu>
        <paper-submenu>
           <paper-item>Item 2</paper-item>
           <paper-menu>
              <paper-item>Item 3</paper-item>
             <paper-item>Item 4</paper-item>
           </paper-menu>
         </paper-submenu>
     </paper-menu>
   </paper-submenu>
   <paper-item>Item 5</paper-item>
</paper-menu>

Actual outcome

<paper-menu>
   <paper-submenu>
     <paper-item>Item 1</paper-item>
   </paper-submenu>
   <paper-item>Item 1</paper-item>
   <paper-item>Item 5</paper-item>
</paper-menu>

Live Demo

https://embed.plnkr.co/GUwZ7tOfw1eInDEYWDuT/

Browsers Affected

Only tested in Chrome