Selected dropdown menu option doesn't work by default
My expectation here would be that "Option 1" will be selected by default after the page loads. This is not what is happening. Instead, the label is displayed instead of the selected option based on the paper element value attribute.
<paper-dropdown-menu name="dropdown" label="Dropdown" selected='1' valueattr='value'>
<paper-dropdown class="dropdown">
<core-menu class="menu">
<paper-item value="1">Option 1</paper-item>
<paper-item value="2">Option 2</paper-item>
</core-menu>
</paper-dropdown>
</paper-dropdown-menu>
source to share
The attribute selected
can be used in conjunction with an element that extends <core-selector>
to control the selection. From the set of elements you are using in your example <core-menu>
is the one that extends <core-selector>
, so you need to set an attribute selected
on that.
Here's a modified example that works as expected:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Polymer Demo</title>
</head>
<body>
<script src="//www.polymer-project.org/webcomponents.js"></script>
<link rel="import" href="//www.polymer-project.org/components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="//www.polymer-project.org/components/paper-dropdown/paper-dropdown.html">
<link rel="import" href="//www.polymer-project.org/components/core-menu/core-menu.html">
<link rel="import" href="//www.polymer-project.org/components/paper-item/paper-item.html">
<h1>Dropdown Menu</h1>
<paper-dropdown-menu label="Select an item">
<paper-dropdown class="dropdown">
<core-menu class="menu" selected="1" valueattr="value">
<paper-item value="1">Option 1</paper-item>
<paper-item value="2">Option 2</paper-item>
</core-menu>
</paper-dropdown>
</paper-dropdown-menu>
</body>
</html>
Note that you also need to set valueattr="value"
to <core-menu>
to indicate that each of the children <core-menu>
has attributes value
that match what will be passed to the attribute select
. (The default is valueattr="name"
for which you need to set attributes name
for each of the <paper-item>
s.)
source to share
Here is an update for Polymer 1.0 paper-dropdown-menu
<paper-dropdown-menu label="Select an item" placeholder="Donut" >
<paper-menu class="dropdown-content" selected="2" attr-for-selected="data-value">
<paper-item data-value="1">Croissant</paper-item>
<paper-item data-value="2">Donut</paper-item>
<paper-item data-value="3">Financier</paper-item>
<paper-item data-value="4">Madeleine</paper-item>
</paper-menu>
</paper-dropdown-menu>
source to share