custom element with menu and submenu

maxwowpow commented 8 years ago

This must be a useful and widely applied design to stack menus dynamically and from a custom element. I spent hours debugging this and come so far as some events (iron-select) are not being propagated [correctly].

In short

<paper-menu>
  <mycustommenu data="menuJsonDefinition"></mycustommenu>
<paper-menu>

where mycustommenu renders paper-item or paper-submenu recursively,

so in the end it looks like

<PAPER-MENU>
  <mycustommenu>
     <PAPER-SUBMENU>
        <PAPER-ITEM class="menu-trigger">submenutrigger</PAPER-ITEM>
        <PAPER-MENU class="menu-content">
          <PAPER-ITEM>xx</PAPER-ITEM>
        </PAPER-MENU>
     </PAPER-SUBMENU>
  </mycustommenu>
</PAPER-MENU>

It WORKS so far. But as soon as we add recursion and replace inner <PAPER-ITEM>xx</PAPER-ITEM> with mycustommenu, which renders to <mycustommenu><PAPER-ITEM>xx</PAPER-ITEM></mycustommenu> it doesn't click/select anymore

    <!doctype html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
        <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
        <link rel="import" href="bower_components/polymer/polymer.html">
        <link rel="import" href="bower_components/paper-styles/paper-styles.html">
        <link rel="import" href="bower_components/paper-item/paper-item.html">
        <link rel="import" href="bower_components/paper-menu/paper-submenu.html">
        <link rel="import" href="bower_components/paper-menu/paper-menu.html">
    </head>

    <body>
        <dom-module id="paper-treeitem">
            <template>
                <template is="dom-if" if="{{data.folder}}">
                    <paper-submenu>
                        <paper-item class="menu-trigger">{{data.name}}</paper-item>
                        <paper-menu class="menu-content" multi>
                            <template is="dom-repeat" items="{{data.children}}">
                                <!-- WORKING -->
                                <!-- COMMENT THIS LINE -->

                                <paper-item>{{item.name}}</paper-item>

                                <!-- NOT WORKING -->
                                <!-- UNCOMMENT THIS LINE -->

                                <!-- <paper-treeitem data="{{item}}"></paper-treeitem> -->
                            </template>
                        </paper-menu>
                    </paper-submenu>
                </template>
                <template is="dom-if" if="{{!data.folder}}">
                    <paper-item>{{data.name}}</paper-item>
                </template>
            </template>

            <script>
                HTMLImports.whenReady(function() {
                    Polymer({
                        is: 'paper-treeitem',
                        properties: {
                            data: {
                                type: Object,
                                value: function() {
                                    return {};
                                }
                            }
                        },
                        ready: function(){
                            console.log(this, this.data)
                        }
                    });
                });
            </script>
        </dom-module>

        <paper-menu>
            <paper-treeitem id="tRootTreeItem"></paper-treeitem>
        </paper-menu>

        <script>
            (function() {
                window.z = document.querySelector("#tRootTreeItem");
                z.data = {
                    name: "Root",
                    folder: true,
                    children: [{
                        name: "File 1"
                    }]
                };
            })()
        </script>

    </body>

    </html>

bower dep

"dependencies": {
    "paper-menu": "PolymerElements/paper-menu#^1.2.2",
    "paper-item": "PolymerElements/paper-item#^1.1.4",
    "paper-styles": "PolymerElements/paper-styles#^1.1.4"
  }

2016-02-29 14_08_41-developer tools - http___localhost_8083_components_paper-treeview2_paper-treeite

woutertenbosch commented 8 years ago

I'm facing the same problem :unamused:, did you find a solution yet?

mitjarobic commented 7 years ago

same problem

boozelclark commented 7 years ago

I have the same problem. A work around may be something similar to what is done in https://github.com/NickBolles/nb-menu but its in version 0.5 so will need some migration.

googlearchive / paper-menu

custom element with menu and submenu #93