A placeholder class is now added to the chip list when the placeholder is shown. FreeForm and MaxItems can now be controlled via properties.

chip-list.js

@@ -29,6 +29,11 @@ class ChipList extends IgniteElement {
                 border-radius: 0.3rem;
             }
 
+            mt-chip-list.placeholder {
+                border: solid 0.13rem #ced4da;
+                border-radius: 0.3rem;
+            }
+
             mt-chip-list > .input-container {
                 display: flex;
                 flex-direction: column;
@@ -50,7 +55,8 @@ class ChipList extends IgniteElement {
 
     get properties() {
         return {
-            items: null,
+            items: [],
+            itemsMax: Number.MAX_SAFE_INTEGER,
             placeholder: null,
             editing: false,
             input: null,
@@ -63,7 +69,8 @@ class ChipList extends IgniteElement {
             searchPlaceholder: "No results found.",
             searchFooter: null,
             blurTimeout: null,
-            documentListener: null
+            documentListener: null,
+            freeForm: true,
         };
     }
 
@@ -71,6 +78,9 @@ class ChipList extends IgniteElement {
         return this.template
             .style("position", "relative")
             .class(this.editing, value => { return value ? "editing" : null })
+            .class([this.editing, this.items], (editing, items) => {
+                return !editing && (items == null || items.length == 0) ? "placeholder" : null;
+            })
             .child(
                 new span(this.placeholder).hide([this.editing, this.items], (editing, items) => {
                     return editing || (items != null && items.length > 0);
@@ -91,21 +101,34 @@ class ChipList extends IgniteElement {
                             .ref(this.input)
                             .onEnter((e) => {
                                 e.preventDefault();
-                                //Add a new item to the chip list.
+
-                                this.items.push({ content: this.input.textContent.trim() });
+                                //If this chip allows free form input then add a new item.
-                                this.input.innerHTML = "";
+                                if (this.freeForm && this.input.textContent.trim().length >= 1) {
+                                    if (this.items == null) {
+                                        this.items = [];
+                                    }
+
+                                    //Add a new item to the chip list.
+                                    this.items.push({ content: this.input.textContent.trim() });
+                                    this.input.innerHTML = "";
+                                    this.searching = false; //Reset searching since we just added a item.
+                                }
                             })
                             .onBackspace((e) => {
                                 //If the backspace key is pressed and there is no content, try to remove the last item from the list.
                                 if (this.input.textContent.length == 0 || (this.input.textContent.length == 1 && this.input.textContent[0] == " ")) {
                                     e.preventDefault();
                                     this.items.pop();
+                                    this.searching = false;
                                 }
                             })
                             .on("keydown", (e) => {
                                 //If we are not searching and a key was pressed, open the search box.
-                                if (!this.searching && (e.key !== "Backspace" || (e.key == "Backspace" && e.target.textContent.length > 0))) {
+                                if (!this.searching && (e.key !== "Backspace" || (e.key == "Backspace" && e.target.textContent.length > 1)) && (this.items == null || this.items.length < this.itemsMax)) {
                                     this.searching = true;
+                                } else if (this.items != null && this.items.length >= this.itemsMax && e.key !== "Backspace") {
+                                    //Don't allow input if we reached the max number of items.
+                                    e.preventDefault();
                                 }
                             })
                     ),
@@ -159,6 +182,10 @@ class ChipList extends IgniteElement {
     }
 
     searchResultClick(item) {
+        if (this.items == null) {
+            this.items = [];
+        }
+
         this.items.push({ content: item.content });
         this.searching = false;
         this.input.innerHTML = "";