Polymer dropdown list issue

Question

I am having huge difficulty to implement simple dropdown list with Polymer 0.5.

I am also parallel migrating from Polymer .5 to 1.0. But that is separate discussion ( Migrating Polymer project .5 to 1.0 error).

Here is the code I am using to define polymer element inside body:

<polymer-element name="x-trigger" extends="paper-icon-button" relative="" on-tap="{{toggle}}" noink="">
<template>
    <shadow></shadow>
    <content></content>
</template>
</polymer-element>

I am using the element further down the body like this:

<x-trigger icon="menu" relative="" noink="" role="button" tabindex="0" aria-label="menu">
    <paper-dropdown tabindex="-1" class="core-transition" style="outline: none; display: none;">
        halign = left
        <br>
        valign = top
    </paper-dropdown>
</x-trigger>

I defined following script section in the head section of the page:

<script>
    Polymer('x-trigger', {
        toggle: function () {
            if (!this.dropdown) {
                this.dropdown = this.querySelector('paper-dropdown');
            }
            this.dropdown && this.dropdown.toggle();
        }
    });
</script>

The problem is, I do see the icon button in the page but when ever I click on that button, nothing happens.

Further debugging revealed,

1. If I open the console debugger in chrome and
2. Place break point on Polymer or inside toggle method in the script section
3. Do page refresh
4. Break point gets hit and drop-down works

I don’t know what is causing the issue

Update: While debugging i got the following error in the line: Polymer('x-trigger', {

/deep/ combinator is deprecated

Does this mean that i have to upgrade to polymer v1 to resolve this issue or is their any workaround for polymer 0.5?

Answer 1

The difference between Polymer 0.5 and 1.0 is really quite large. The /deep/ selector you reference was one of the big issues I faced migrating.

I recently migrated a project from 0.5 to 1.0 and in order to do so I had to change all instances of /deep/ to the new notation.

My advice would be to migrate from 0.5 to 1.0 first, then use the new Polymer documentation to come up with a solution.

In that project I implemented a simple drop-down. Here's my approach:

<dom-module id="profile-edit-page">
  <style>
    // Styling
  </style>
  <template>
    <div class="container-app">
      <div class="container-inner">

        <!-- Other form elements -->

        <input is="iron-input" id="filterInput" type="text" required placeholder="Automotive assistant" label="Occupation" bind-value="{{order.occupation}}" on-focus="startPickingOccupation" on-keydown="updateFilter" on-blur="stopPickingOccupation" class="block field input-reg mb2"></input>

        <div class$="[[pickingOccupationClass(pickingOccupation)]]">
          <paper-menu >
            <template id="occupationRepeat" is="dom-repeat" items="[[occupations]]" filter="isShown">
              <paper-item class="option" on-click="pickOccupation">[[item]]</paper-item>
            </template>
          </paper-menu>
        </div>

        <button class$="inputClass" class="btn btn-primary btn-block" on-click="forward" value="{{order.registration}}">Continue</button>
      </div>
    </div>

  </template>
</dom-module>

<script>
  Polymer({
    properties: {
      order: Object,
      pickingOccupation: {
        type: Boolean,
        value: false
      },
      occupationFilter: {
        type: String,
        value: ""
      },
      occupations: {
        type: Array,
        value: ["Abattoir Worker",
      "Accommodation Officer",
      "Accountant",
      // Etc.
      "Zoology Consultant"]
      }
    },
    is: "profile-edit-page",

    pickOccupation: function(e) {
      this.set('order.occupation', e.model.item);
      this.set('pickingOccupation', false);
    },

    startPickingOccupation: function() {
      this.pickingOccupation = true;
    },

    stopPickingOccupation: function() {
      this.async(function() {
        this.pickingOccupation = false;
      },500);
    },

    updateFilter: function() {
      if(typeof(this.$.occupationRepeat) === "undefined") {
        return;
      }
      this.set('occupationFilter', this.$.filterInput.value.toLowerCase());
      this.async(function() {
        this.$.occupationRepeat.render();
      },50);
    },

    isShown: function(item) {
      if(this.order.occupation == '') {
        return false;
      }
      return (item.toLowerCase().search(this.occupationFilter) !== -1);
    },
    pickingOccupationClass: function(picking) {
      if(this.pickingOccupation) {
        return "picking";
      } else {
        return "hidden";
      }
    }
  });
</script>

Answer 2

Move the script into the actual polymer-element:

<polymer-element name="x-trigger" extends="paper-icon-button" relative="" on-tap="{{toggle}}" noink="">
  <template>
      <shadow></shadow>
      <content></content>
  </template>
  <script>
      Polymer('x-trigger', {
          toggle: function () {
              if (!this.dropdown) {
                  this.dropdown = this. querySelector('paper-dropdown');
              }
              this.dropdown && this.dropdown.toggle();
          }
      });
  </script>
</polymer-element>