Search code examples
dartpolymerdart-polymer

How to disable sticky selection in polymer core-menu


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."


Solution

  • 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.)