How can I reset a paper-dropdown-menu in Polymer so nothing is selected?

Question

I would like to reset a Polymer paper-dropdown-menu to it's initial state in JavaScript so nothing is selected, so it looks like this:

I'm able to add an id to the paper-menu tag inside the paper-dropdown-menu and access it in JavaScript and choose it's selected index:

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

However, I can only select an available item, so the number needs to be 0 or greater. I cannot set it to -1 to select nothing to return it to it's initial state visually, yet I can log the selected state to what I just set it to. Other values I tried to change selected to are null and undefined.

Here is the html I'm using for the paper-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]]">

Metallist

Answer 1

Its a ready only field. So you might have to use Polymer provided function to set ready only values. Try the below

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

If the above does not work, try other variants like below

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

Cuisine

Thank you! document.getElementById("accountTypeDropdown")._setSelectedItem(null); works! – Metallist

Resetting works with _setSelectedItem(null), however there is one strange thing. Setting a new value afterwards by changing the model only works if the new value differs from the value before the reset. I set up a testcase here: pm.yves.glodt.name – Pimbley

Try adding selected={{selectedMenu}} on paper-menu. And set selectedMenu=null whenever you want to reset the item. – Cuisine

Answer 2

Nowadays it seemts 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;

Pimbley

Answer 3

You can manually trigger an event:

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

Island