search

googlearchive / paper-dropdown-menu

A UI control to choose an option from a drop-down menu, similar to a <select>
23 stars 21 forks source link

Default selected item #48

Open benjaminapetersen opened 9 years ago

benjaminapetersen commented 9 years ago

This is a feature suggestion. Perhaps as an optional alternative to label, it seems like a default selected attribute could be place on one of the children, much like a native html select box:

<select name="select">
  <option value="value1">Value 1</option> 
  <option value="value2" selected>Value 2</option>
  <option value="value3">Value 3</option>
</select>

vs

<paper-dropdown-menu>
  <paper-dropdown class="dropdown">
    <paper-item value="value1">Value 1</paper-item> 
    <paper-item value="value2" selected>Value 2</paper-item>
    <paper-item value="value3">Value 3</paper-item>
  </paper-dropdown>
</paper-dropdown-menu>

This seems like an intuitive use of the component.

denizdogan commented 9 years ago

Does it really make sense for paper-item? I think it's supposed to be more of a general "item" for the paper components than an "option".

benjaminapetersen commented 9 years ago

My guess would be that the child is irrelevant. It doesn't really matter if its a "div" or a "paper-item" or whatever. The important thing is that the dropdown probably needs a "selected" state it can track on a child element (of any appropriate type) to bring the interface to parity with a native html select box.

limcheekin commented 9 years ago

The following answer works for me: http://www.stackoverflow.dluat.com/questions/31982671/polymer-1-0-5-select-not-working-on-paper-dropdown-menu

Hope this help!

benjaminapetersen commented 9 years ago

Interesting workaround. Still curious if this should be more straight forward/documented as the dropdown seems to mimic the select box in basic functionality (meaning I think this should probably be trivial).

sunnyagain commented 9 years ago

I am having trouble to set default option. above solution only sets the selected item in menu but selected Items label is not shown.

adamrr724 commented 8 years ago

Try using the fallbackSelection property for paper dropdown menu.

I used it like this, and it worked just fine!

<paper-dropdown-menu required label="Foo"> <paper-listbox attr-for-selected="value" class="dropdown-content" fallback-selection="0" selected="{{fooVariable}}"> <paper-item value="0">A</paper-item> <paper-item value="1">B</paper-item> <paper-item value="2">C</paper-item> <paper-item value="3">D</paper-item> </paper-listbox> </paper-dropdown-menu>

Used inside an iron-form.