Polymer 1.0 paper-submenu(s) inside paper-menu

Question

Then I select an item in my outer paper-menu and after that I navigate into my submenu and select an item there, the outer-item is still selected. also conversely:

<paper-menu class="list" attr-for-selected="data-route" selected="[[route]]" selectable="a">
 <a data-route="one" href="{{baseUrl}}">
  <iron-icon icon="home"></iron-icon>
  <span>one</span>
 </a>
 <paper-submenu>
  <paper-item class="menu-trigger">two</paper-item>
  <paper-menu class="menu-content">
    <a data-route="two-1" href="{{baseUrl}}two-1">
     <paper-item>
      <iron-icon icon="home"></iron-icon>
      <span>two 1</span>
     </paper-item>
    </a>
    <a data-route="two-2" href="{{baseUrl}}two-2">
     <paper-item> 
      <iron-icon icon="info"></iron-icon>
      <span>two 2</span>
     </paper-item>
    </a>
  </paper-menu>
 </paper-submenu>
 <a data-route="users" href="{{baseUrl}}users">
  <iron-icon icon="info"></iron-icon>
  <span>Users</span>
 </a>

 <a data-route="contact" href="{{baseUrl}}contact">
  <iron-icon icon="mail"></iron-icon>
  <span>Contact</span>
 </a>
</paper-menu>

Any idea how to fix it?

Answer 1

This can be done by programmatically managing the menu opened property via on-tap:

<dom-module id="menu-nav">
    <template>
        <!-- define route for 'view', e.g. /:view -->
        <!-- define route for 'subview', e.g. /bar/:subview -->

        <paper-menu selected="{{view}}" attr-for-selected="name">
            <paper-item name="foo" on-tap="_onFoo">
                Foo
            </paper-item>

            <paper-submenu opened="{{_isSubmenu(view, _inSubmenu)}}">
                <paper-item on-tap="_onSubmenu" class="menu-trigger">
                    Bar
                </paper-item>

                <paper-menu selected="{{subview}}" attr-for-selected="subname" class="menu-content">
                    <paper-item subname="baz" on-tap="{{_onBar}}">
                        Baz
                    </paper-item>
                <paper-menu>
            </paper-submenu>
        <paper-menu>
    </template>

    <script>
        Polymer({
            is: "menu-nav",

            properties: {
                view: {
                    type: String,
                    value: "foo"
                },

                _inSubmenu: {
                    type: Boolean,
                    value: false
                }
            },

            _isSubmenu: function (view, _inSubmenu) {
                return _inSubmenu || view === 'bar';
            },

            _onFoo: function () {
                this.set('_inSubmenu', false);
                // ... transition to next route, this could depend on the router being used
                // for eample, with Excess router, this would be:
                // Excess.RouteManager.transitionTo('/foo');
            },

            _onBar: function () {
                this.set('_inSubmenu', true);
                this.set('subview', undefined);
                // ... transition to /bar/baz
            },

            _onSubmenu: function (e) {
                e.stopPropagation();
                this._onBar();
            },
        });
    </script>
</dom-module>

Related issue: https://github.com/PolymerElements/paper-menu/issues/42

Answer 2

You can do this.. Add data-route attribute to your paper-submenu and bind it with the selected attribute of the nested paper-menu.

<paper-menu class="list" attr-for-selected="data-route" selected="[[route]]" selectable="a">
 <a data-route="one" href="{{baseUrl}}">
  <iron-icon icon="home"></iron-icon>
  <span>one</span>
 </a>
 <paper-submenu **data-route="[[selectedMenuItem]]"**>
  <paper-item class="menu-trigger">two</paper-item>
  <paper-menu class="menu-content" **selected="{{selectedMenuItem}}"**>
    <a data-route="two-1" href="{{baseUrl}}two-1">
     <paper-item>
      <iron-icon icon="home"></iron-icon>
      <span>two 1</span>
     </paper-item>
    </a>
    <a data-route="two-2" href="{{baseUrl}}two-2">
     <paper-item> 
      <iron-icon icon="info"></iron-icon>
      <span>two 2</span>
     </paper-item>
    </a>
  </paper-menu>
 </paper-submenu>
 <a data-route="users" href="{{baseUrl}}users">
  <iron-icon icon="info"></iron-icon>
  <span>Users</span>
 </a>

 <a data-route="contact" href="{{baseUrl}}contact">
  <iron-icon icon="mail"></iron-icon>
  <span>Contact</span>
 </a>
</paper-menu>