Set selected item in paper-drop-down-menu?

Question

I have this paper-dropdown-menu with one button:

<paper-dropdown-menu id="Default" label="My items">
  <paper-menu  id="DefaultDropDown" attr-for-selected="value" selected="{{selection}}" class="dropdown-content">
    <paper-item value="5">Item 1</paper-item>
    <paper-item value="6">Item 2</paper-item>
    <paper-item value="7">Item 3</paper-item>
  </paper-menu>
</paper-dropdown-menu>
<button onclick="clickEvent();">Click</button>

<script>
  function clickEvent() {
    $('#Default').selectedItem = -1;
  }
</script>

I want in the event "clickEvent" you can set selection dropdown-menu to -1: noT selected item.

Any idea how?

The code I put javascript is only to illustrate the idea

Answer 1

The '#' here is redundant because $(...) only supports id anyway:

 $('#Default').s...

The selection is maintained by the child component (<paper-menu>) in your case not the <paper-dropdown-menu> itself.

$('DefaultDropDown').selectIndex(-1);

I couldn't figure out from the docs whether deselecting is actually supported when multi is not set.