Behave correctly upon Enter on TagInputEdit

This commit is contained in:
Henrik Giesel 2021-06-24 15:54:22 +02:00
parent 9418b1491b
commit f3df0fe305
3 changed files with 13 additions and 7 deletions

View file

@ -21,21 +21,25 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
} }
} }
function tagDelete(event: Event): void { function deleteTag(event: Event): void {
dispatch("tagdelete", { name }); dispatch("tagdelete", { name });
event.stopPropagation(); event.stopPropagation();
} }
function updateTag() {
active = false;
}
</script> </script>
{#if active} {#if active}
<TagInputEdit bind:name on:focusout={() => (active = false)} /> <TagInputEdit bind:name on:focusout={() => (active = false)} on:update={updateTag} />
{:else} {:else}
<span <span
class="d-inline-flex align-items-center tag text-nowrap bg-secondary rounded ps-2 pe-1 me-1" class="d-inline-flex align-items-center tag text-nowrap bg-secondary rounded ps-2 pe-1 me-1"
on:click|stopPropagation={checkForActivation} on:click|stopPropagation={checkForActivation}
> >
<span>{name}</span> <span>{name}</span>
<Badge class="delete-icon rounded ms-1 mt-1" on:click={tagDelete} <Badge class="delete-icon rounded ms-1 mt-1" on:click={deleteTag}
>{@html deleteIcon}</Badge >{@html deleteIcon}</Badge
> >
</span> </span>

View file

@ -34,6 +34,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
} else if (event.code === "Backspace" && name.endsWith("::")) { } else if (event.code === "Backspace" && name.endsWith("::")) {
name = name.slice(0, -2); name = name.slice(0, -2);
event.preventDefault(); event.preventDefault();
} else if (event.code === "Enter") {
onAccept(event);
event.preventDefault();
} }
} }

View file

@ -26,16 +26,15 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
console.log("onkeydown"); console.log("onkeydown");
} }
function stopPropagation(event: Event): void { /* function stopPropagation(event: Event): void { */
event.stopPropagation(); /* event.stopPropagation(); */
} /* } */
</script> </script>
<TagInput <TagInput
bind:name bind:name
bind:input bind:input
on:keydown={onKeydown} on:keydown={onKeydown}
on:click={stopPropagation}
on:focusout on:focusout
on:update on:update
on:add on:add