CODEWITHSUNDEEP
polymer-1.0
Typel
Typel

Reputation: 1139

Set selected value in a paper-menu in Polymer 1.0

I've created a custom element which utilizes paper-dropdown-menu and paper-menu in order to manage a select box in a web form. However, when trying to set the selected value through JavaScript, even though the value updates, the element in the page does not actually show the selected item in the list afterwards.

I've looked at countless examples and tried dozens of different methods. I wasn't sure what to use as my attr-for-selected, but tried value, name, and label so far.

<dom-module is="custom-listbox">
<template>
<template is="dom-repeat" items="{{dropMenus}}">
  <paper-dropdown-menu id="dropdownmenu" label="Type">
    <paper-menu id="menu" class="dropdown-content" selected="{{selectedValue}}" attr-for-selected="label">
    <template is="dom-repeat" items="{item}}">
      <paper-item{{item}}</paper-item>
    </template>
    </paper-menu>
  </paper-dropdown-menu>
</template>
</template>

<script>
Polymer({
  is: 'custom-listbox',
  ready: function() {
    var arr = ["value1", "value2", "value3"];
    this.set('dropMenus', [arr]);
  },
  properties: {
    selectedValue: {
      type: String,
      value: 'value1' // initially selected? ...doesn't work either.
      },
  setSelected:function(selectedVal) {
    console.log(selectedVal);
    this.selectedValue = selectedVal;
    console.log(this.selectedValue);
    }
});
</script>

</dom-module>

Later in my app.js I try to set the selected value like so:

document.querySelector('#CustomListboxID').setSelected('value2');

Console logs this, showing that 'value2' was passed to the element, and that within the element, this.selectedValue was properly set to 'value2'. However, again, the element does not actually update in the page. Am I missing something?

value2
value2

Edit

Many of the discussions in Stack Overflow regarding this topic are tagged as Polymer although it isn't always indicated whether the discussion relates to version 0.5 or 1.0, which might as well be two completely different frameworks. I'm not sure if the methods I've used above are maybe outdated, for this reason...

It seems like I should be able to use paper-menu's .select(value) function to set the selected value like so:

this.querySelector('#menu').select(selectedVal);

This function is documented, and I confirmed that it exists and is being imported into paper-menu from iron-menu-behavior. However, though it throws no errors, it also does nothing.

Upvotes: 2

Views: 4464

Answers (1)

SG_
SG_

Reputation: 1336

Here is it working. You have to set the 'label' attribute of 'paper-item', use <paper-item label="{{item}}">{{item}}</paper-item> instead of <paper-item{{item}}</paper-item> and fixed { mismatch in the javascript.

<!DOCTYPE html>
<html>  
<head>

  <title>Template me</title>
  
  <script src="https://rawgit.com/webcomponents/webcomponentsjs/master/webcomponents.js"></script>
  
  <base href="http://polygit.org/components/">
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="paper-menu/paper-menu.html">
  <link rel="import" href="paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="paper-item/paper-item.html">
  
</head>
<body class="fullbleed">

<custom-listbox id="CustomListboxID"></custom-listbox>

<dom-module is="custom-listbox">
<template>
<template is="dom-repeat" items="{{dropMenus}}">
  <paper-dropdown-menu id="dropdownmenu" label="Type">
    <paper-menu id="menu" class="dropdown-content" attr-for-selected="label" selected="{{selectedValue}}">
    <template is="dom-repeat" items="{{item}}">
      <paper-item label="{{item}}">{{item}}</paper-item>
    </template>
    </paper-menu>
  </paper-dropdown-menu>
</template>
</template>

<script>
Polymer({
  is: 'custom-listbox',
  ready: function() {
    var arr = ["value1", "value2", "value3"];
    this.set('dropMenus', [arr]);
  },
  properties: {
    selectedValue: {
      type: String,
      value: 'value1' // now initial works !! 
    }
  },
  setSelected:function(selectedVal) {
    console.log(selectedVal);
    this.selectedValue = selectedVal;
    console.log(this.selectedValue);
  }
  
});
</script>

</dom-module>

</body>
</html>

Now document.querySelector('#CustomListboxID').setSelected('value2'); is updating the dropdown-menu here.

Upvotes: 2

Related Questions