diff --git a/chip-list.js b/chip-list.js index 75ca7bb..897b2eb 100644 --- a/chip-list.js +++ b/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)); }), - `
`, - //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(); } }