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

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>