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 ``.
+ * The id of a datalist for the input (if any).
+ * If not using Shadow DOM this can match the id of an existing ``, 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 ` `'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 `` in the same shadow root as the ` `.
+ */
+ 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 and the attribute. */
+ _listId: function (override, values) {
+ if (override)
+ return override;
+
+ if (values && Array.isArray(values) && values.length > 0)
+ return 'values';
}
};
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 @@
[[label]]
-
+
+
+
+
+
+
+
+
@@ -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]]"