MontoyaTech/ignite-html-material
MontoyaTech/ignite-html-material
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Improved chip list and made it feel more user friendly.

Browse Source
This commit is contained in:
Matt Mo 2020-09-28 09:00:50 -07:00
parent e617d3596a
commit 3a1eaa37b1
1 changed files with 10 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
chip-list.js
View File

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