Search code examples
menuresetpolymer-1.0selecteddropdown

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


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:

paper-dropdown-menu nothing selected

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

Solution

  • 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();