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 {
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();
}
}