This issue was raised in the Github repo on 9 Sept 2014:
Whenever I select a menu item, and the menu disappears, the next time
I open the menu, my previous selection remains selected. This makes it
impossible to reselect the same menu item.
There is an implemented solution (19 Sept) in a comment under core-menu-button:
There is now a stickySelection property that defaults to false.
Since it defaults to false, I should never need to set it. But the sticky behavior persists and I cannot work out where to set the attribute/property. Here is the menu:
<core-menu-button>
<core-icon-button icon='more-vert'></core-icon-button>
<core-dropdown class='dropdown'>
<core-menu on-core-select='{{menuSelectHandler}}'>
<template repeat='{{menuItems}}'>
<core-item label='{{}}'></core-item>
</template>
</core-menu>
</core-dropdown>
</core-menu-button>
In between menu selections I would like to return the menu to "nothing selected."
It looks like the stickySelection
property was removed when the core-menu-button
was refactored. I'm not sure if this was done on purpose, so I've reopened the original bug.
As a workaround in the meantime, you can listen for the on-core-overlay-open event (fired when the menu overlay opens or closes) and clear the selection manually. In the markup, add the event listener and give the menu an ID:
<core-menu-button on-core-overlay-open="{{menuOpen}}">
<core-icon-button icon='menu'></core-icon-button>
<core-dropdown class='dropdown'>
<core-menu id="menu" on-core-select='{{menuSelectHandler}}'>
The menuOpen
method would look like this:
menuOpen: function(e) {
if (! e.detail.opened) {
this.$.menu.selected = null;
}
}
(Alternately, you could listen on core-overlay-close-completed
, which is fired when the overlay finishes closing. I was afraid that would lead to timing issues if the user closed and reopened the menu rapidly, but it doesn't appear to be an issue on core-menu-button, perhaps because there's no delay closing the menu.)