Improved chip list and made it feel more user friendly.

chip-list.js

@@ -32,8 +32,8 @@ class ChipList extends IgniteElement {
             mt-chip-list > .input-container {
                 display: flex;
                 flex-direction: column;
-                align-items: center;
                 justify-content: center;
+                flex: 1;
             }
 
             mt-chip-list > .input-container > .input {
@@ -102,18 +102,12 @@ class ChipList extends IgniteElement {
                                     this.items.pop();
                                 }
                             })
-                            .on("keydown", () => {
+                            .on("keydown", (e) => {
                                 //If we are not searching and a key was pressed, open the search box.
-                                if (!this.searching) {
+                                if (!this.searching && (e.key !== "Backspace" || (e.key == "Backspace" && e.target.textContent.length > 0))) {
                                     this.searching = true;
                                 }
                             })
-                            .onBlur((e) => {
-                                //Force the input to not lose focus if we are editing.
-                                if (this.editing) {
-                                    e.target.focus();
-                                }
-                            })
                     ),
                 new Popper()
                     .property("show", this.searching)
@@ -126,21 +120,18 @@ class ChipList extends IgniteElement {
                                 new list(this.searchResults, item => {
                                     return new div(item.content).class("search-result p-2").onClick(() => this.searchResultClick(item));
                                 }),
-                                `<hr />`,
-                                //new button().class("btn btn-primary text-white").child("Add missing location")
                                 this.searchFooter
                             )
                     ),
             )
             .onClick((e) => {
-                e.stopPropagation(); //Stop this from bubbling to the document click.
                 this.focus(); //Focus our element if we are not already.
             })
     }
 
     ready() {
         //Add a listener to the document click to blur our element.
-        this.documentListener = () => this.blur();
+        this.documentListener = (e) => this.blur(e);
         window.document.addEventListener("click", this.documentListener);
 
     }
@@ -157,8 +148,9 @@ class ChipList extends IgniteElement {
         }
     }
 
-    blur() {
-        if (this.editing) {
+    blur(e) {
+        //Only blur if we are editing and the target is not ourself or any of our children.
+        if (this.editing && e.target != this && !this.contains(e.target)) {
             this.editing = false;
             this.searching = false;
             this.input.blur();
@@ -167,8 +159,10 @@ class ChipList extends IgniteElement {
     }
 
     searchResultClick(item) {
-        console.log("Search item was clicked:", item);
         this.items.push({ content: item.content });
+        this.searching = false;
+        this.input.innerHTML = "";
+        this.input.focus();
     }
 }