Allow correctly adding tags

+ Make taginput unfocusable via Tab => prefer Ctrl+Shift+T
This commit is contained in:
Henrik Giesel 2021-06-24 18:09:01 +02:00
parent ef8c46045e
commit 50519ea5c8
3 changed files with 15 additions and 6 deletions

View File

@ -38,7 +38,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
bind:name
bind:input
on:focusout={() => (active = false)}
on:update={updateTag}
on:tagupdate={updateTag}
on:mount={(event) => event.detail.input.focus()}
/>
{:else}

View File

@ -21,6 +21,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
tags.splice(tags.indexOf(detail.name), 1);
tags = tags;
}
function addTag({ detail }: CustomEvent) {
if (!tags.includes(detail.name) && detail.name.length > 0) {
tags.push(detail.name);
}
tags = tags;
}
</script>
<StickyBottom>
@ -31,7 +38,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<Tag name={tag} on:tagdelete={deleteTag} />
{/each}
<TagInput bind:input={tagInputNew} name={newName} />
<TagInput bind:input={tagInputNew} name={newName} on:tagupdate={addTag} />
</div>
</StickyBottom>

View File

@ -20,7 +20,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
}
function onAccept(event: Event): void {
dispatch("update", { tagname: normalizeTagname(name) });
dispatch("tagupdate", { name: normalizeTagname(name) });
input.value = "";
}
function dropdownBlur(event: Event, dropdown: Dropdown): void {
@ -46,9 +47,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
const splitted = pasted.split(" ");
const last = splitted.pop();
for (const token of splitted) {
const tagname = normalizeTagname(token);
if (tagname) {
dispatch("add", { tagname });
const name = normalizeTagname(token);
if (name) {
dispatch("tagadd", { name });
}
}
name = last!;
@ -73,6 +74,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<input
bind:this={input}
type="text"
tabindex="-1"
size="1"
bind:value={name}
on:focus={(event) => onFocus(event, dropdown)}