<!--
@element vaadin-combo-box
-->

<link rel='import' href='../polymer/polymer.html'>
<link rel='import' href='../paper-input/paper-input-container.html'>
<link rel='import' href='../iron-input/iron-input.html'>
<link rel='import' href="../iron-icons/iron-icons.html">
<link rel='import' href='../iron-icon/iron-icon.html'>
<link rel='import' href='vaadin-adaptive-overlay.html'>

<dom-module id="vaadin-combo-box">
  <template>
    <paper-input-container>
      <input is="iron-input">
      <iron-icon icon="arrow-drop-down" suffix on-tap='open'></iron-icon>
    </paper-input-container>

    <vaadin-adaptive-overlay id="overlay" opened={{opened}}>
      <ul>
        <li>Foo</li>
        <li>Bar</li>
        <li>Baz</li>
      </ul>
    </vaadin-adaptive-overlay>
  </template>
</dom-module>

<script>
  Polymer({
    is: "vaadin-combo-box",

    properties: {
      /**
       * True if the dropdown is open, false otherwise.
       */
      opened: {
        type: Boolean,
        notify: true,
        value: false
      }
    },

    open: function() {
      this.$.overlay.open();
    }
  });
</script>

<!--
@element vaadin-combo-box
-->

<link rel='import' href='../polymer/polymer.html'>
<link rel='import' href='../paper-input/paper-input-container.html'>
<link rel='import' href='../iron-input/iron-input.html'>
<link rel='import' href="../iron-icons/iron-icons.html">
<link rel='import' href='../iron-icon/iron-icon.html'>
<link rel='import' href='vaadin-adaptive-overlay.html'>

<dom-module id="vaadin-combo-box">
  <template>
    <paper-input-container on-tap='open'>
      <input is="iron-input">
      <iron-icon icon="arrow-drop-down" suffix></iron-icon>
    </paper-input-container>

    <vaadin-adaptive-overlay id="overlay" opened={{opened}}>
      <ul>
        <li>Foo</li>
        <li>Bar</li>
        <li>Baz</li>
      </ul>
    </vaadin-adaptive-overlay>
  </template>
</dom-module>

<script>
  Polymer({
    is: "vaadin-combo-box",

    properties: {
      /**
       * True if the dropdown is open, false otherwise.
       */
      opened: {
        type: Boolean,
        notify: true,
        value: false
      }
    },

    open: function() {
      this.$.overlay.open();
    }
  });
</script>

Move tap handler to the input-container from the suffix button
Move tap handler to the input-container from the suffix button
