From 399d5735cfeee3ade4e672fe54889c53974d61fa Mon Sep 17 00:00:00 2001
From: Keith Henry <keithhenry@gmail.com>
Date: Thu, 7 Dec 2017 09:24:13 +0000
Subject: [PATCH 1/2] Add datalist property and _listId function

The `datalist` property holds an array of values to include in a `<datalist>` element. The `list` property holds the `id` of that element.
---
 paper-input-behavior.html | 22 +++++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/paper-input-behavior.html b/paper-input-behavior.html
index 566dc58e..d1caf798 100644
--- a/paper-input-behavior.html
+++ b/paper-input-behavior.html
@@ -106,7 +106,8 @@
       },
 
       /**
-       * The datalist of the input (if any). This should match the id of an existing `<datalist>`.
+       * The id of a datalist for the input (if any).
+       * If not using Shadow DOM this can match the id of an existing `<datalist>`, otherwise the datalist property must also be set
        * If you're using PaperInputBehavior to implement your own paper-input-like
        * element, bind this to the `<input is="iron-input">`'s `list` property.
        */
@@ -114,6 +115,16 @@
         type: String
       },
 
+      /**
+       * Optional values for a datalist for the input.
+       * If the list property is also set that will be used as the id.
+       * If you're using PaperInputBehavior to implement your own paper-input-like
+       * element, use this to generate `<datalist>` in the same shadow root as the `<input>`.
+       */
+      datalist: {
+        type: Array
+      },
+
       /**
        * A pattern to validate the `input` with. If you're using PaperInputBehavior to
        * implement your own paper-input-like element, bind this to
@@ -554,6 +565,15 @@
           this._focusableElement.focus();
         }
       }
+    },
+
+    /** Get the ID of any <datalist> and the <input list=""> attribute. */
+    _listId: function (override, values) {
+        if (override)
+            return override;
+
+        if (values && Array.isArray(values) && values.length > 0)
+            return 'values';
     }
   };
 

From 021ccbe15e4fed7552f8337cafef1112bc07e06b Mon Sep 17 00:00:00 2001
From: Keith Henry <keithhenry@gmail.com>
Date: Thu, 7 Dec 2017 09:28:57 +0000
Subject: [PATCH 2/2] Added generated datalist element

If there is a `datalist` property set then a `<datalist>` is generated in the same shadow root as the `<input>` and its `list` attribute set.
---
 paper-input.html | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/paper-input.html b/paper-input.html
index f230466b..cb531b72 100644
--- a/paper-input.html
+++ b/paper-input.html
@@ -162,7 +162,14 @@
       <slot name="prefix" slot="prefix"></slot>
 
       <label hidden$="[[!label]]" aria-hidden="true" for="input" slot="label">[[label]]</label>
-
+        
+      <template is="dom-if" if="[[datalist]]">
+        <datalist id="[[_listId(list, datalist)]]">
+          <template is="dom-repeat" items=[[datalist]] as="listitem">
+            <option value$=[[listitem]]></option>
+          </template>
+        </datalist>
+      </template>
       <span id="template-placeholder"></span>
 
       <slot name="suffix" slot="suffix"></slot>
@@ -207,7 +214,7 @@
         name$="[[name]]"
         placeholder$="[[placeholder]]"
         readonly$="[[readonly]]"
-        list$="[[list]]"
+        list$="[[_listId(list, datalist)]]"
         size$="[[size]]"
         autocapitalize$="[[autocapitalize]]"
         autocorrect$="[[autocorrect]]"
@@ -245,7 +252,7 @@
         name$="[[name]]"
         placeholder$="[[placeholder]]"
         readonly$="[[readonly]]"
-        list$="[[list]]"
+        list$="[[_listId(list, datalist)]]"
         size$="[[size]]"
         autocapitalize$="[[autocapitalize]]"
         autocorrect$="[[autocorrect]]"