How can I reset the dropdown menu in Polymer, so nothing is selected?

Question

I would like to reset the Polymer Paper drop-down menu to its original state in JavaScript, so nothing is selected, so it looks like this:

I can add the identifier to the "Paper Text" tag in the paper drop-down menu and access it in JavaScript and select its selected index:

document.getElementById("accountTypeMenu").selected = 1; 

However, I can only select the available item, so the number must be 0 or more. I can’t set it to -1 to select anything, to visually return it to its initial state, but I can register the selected state for what I just set it. Other values ​​that I tried to change are selected like this: null and undefined.

Here is the html that I use for the dropdown menu:

 <paper-dropdown-menu id="accountTypeDropdown" selected-item="{{selectedItem}}" selected-item-label="{{selected}}" label='&#65290;Account type' style="width:50%;" noink no-animations> <paper-menu id="accountTypeMenu" class="dropdown-content" onmouseup="requiredMenuFieldSelected('accountType')"> <template is="dom-repeat" items="{{accountTypes}}" as="accountType"> <paper-item value="[[accountType.id]]">[[accountType.name]]</paper-item> </template> </paper-menu> </paper-dropdown-menu> <input is="iron-input" name="accountType" type="hidden" value$="[[selectedItem.value]]"> 

Answer 1

This is a finished field only. Therefore, you may need to use the Polymer function to set only ready-made values. Try below

 document.getElementById("accountTypeDropdown")._setSelectedItem({}); 

If the above does not work, try other options, for example below

 document.getElementById("accountTypeDropdown")._setSelectedItem(null); document.getElementById("accountTypeDropdown")._setSelectedItem(); 

Answer 2

You can manually trigger the event:

 document.querySelector("#accountTypeDropdown")._onIronDeselect(); 

Answer 3

Currently, it is better to use <paper-listbox></paper-listbox> .

With it, you can simply set selected to null :

 <paper-dropdown-menu label="Type"> <paper-listbox class="dropdown-content" selected="{{myObj.type}}" attr-for-selected="value" id="list"> <paper-item value="0">Type 0</paper-item> <paper-item value="1">Type 1</paper-item> </paper-listbox> </paper-dropdown-menu> 

And then in JavaScript :

 this.$.list.selected = null;