CODEWITHSUNDEEP
javascriptpolymerpolymer-1.0
Jonathan Andersson
Jonathan Andersson

Reputation: 1422

Deselect an item in paper-menu after click

I'm running polymer 1.0.9 the paper-menu element but the default behaviour is not quite as I'd like it.

When you select an item in the paper-menu the item is toggled. To select the same item again you would have to select another item in the menu and then re-select the first one.

At the moment it works like this: https://elements.polymer-project.org/elements/paper-menu?view=demo:demo/index.html

But I would like the behaviour of a regular button but I still want the "free" behaviours that comes with paper-menu.

Is there an smart way to deselect the button directly after you've pressed it? This is my menu:

<paper-menu id= "action-menu">
  <template is="dom-repeat" items="{{actions}}" as="action">
    <paper-icon-item id={{action.attributes.id}}>
      <iron-icon icon="{{action.attributes.icon}}" item-icon>
      </iron-icon>
        <p>{{action.attributes.title}}</p>
    </paper-icon-item>
  </template>
</paper-menu>

Upvotes: 2

Views: 2387

Answers (2)

ootwch
ootwch

Reputation: 960

I have solved this by setting the selected property to null in the event handler for the menu. Works well.

Alternatively (If, like me, you use the <paper-menu-button> element, you could perhaps also use the paper-dropdown-close on <paper-menu-button> or <paper-dropdown-menu>.

PS: I know this is an old question, but there is an open bug report on https://github.com/Polymer/paper-menu-button/issues/56 and I have had exactly this issue today - so perhaps this is useful to someone.

Upvotes: 1

urandom
urandom

Reputation: 1157

You could try listening in on the iron-activate event, and when said item is selected, you can call menu.select(index) to deselect it.

something like [pseudo-code follows]:

<paper-menu id="action-menu" on-iron-activate="onMenuActivate">

...

onMenuActivate: function(event, detail) {
    var menu = Polymer.dom(event).localTarget,
        name = event.detail.selected,
        selected = (menu.selectedValues || []).indexOf(name) == -1;

    if (name == MY_SPECIAL_INDEX && selected) {
          menu.select(name);
    }
}

The activation event is fired before the select one, which is why one has to check whether the selected item is not in the current list of selected items.

Upvotes: 0

Related Questions