Fix some deletion behavior

This commit is contained in:
Henrik Giesel 2021-06-28 03:00:17 +02:00
parent ba64f50593
commit 39ffaf3427
2 changed files with 13 additions and 24 deletions

View file

@ -3,7 +3,7 @@ Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
--> -->
<script lang="typescript"> <script lang="typescript">
import { createEventDispatcher } from "svelte"; import { createEventDispatcher, onDestroy } from "svelte";
import type Dropdown from "bootstrap/js/dist/dropdown"; import type Dropdown from "bootstrap/js/dist/dropdown";
@ -27,10 +27,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
function select(index: number) {
selected = index;
}
const updateAutocomplete = const updateAutocomplete =
(createDropdown: (element: HTMLElement) => Dropdown) => (createDropdown: (element: HTMLElement) => Dropdown) =>
(event: KeyboardEvent): Dropdown => { (event: KeyboardEvent): Dropdown => {
@ -77,22 +73,17 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
return autocomplete; return autocomplete;
}; };
function destroyAutocomplete(): void { onDestroy(() => {
if (!autocomplete) { if (!autocomplete) {
return; return;
} }
autocomplete.hide(); autocomplete.hide();
selected = null; });
active = false;
}
</script> </script>
<WithDropdownMenu let:menuId let:createDropdown> <WithDropdownMenu let:menuId let:createDropdown>
<slot <slot updateAutocomplete={updateAutocomplete(createDropdown)} />
updateAutocomplete={updateAutocomplete(createDropdown)}
{destroyAutocomplete}
/>
<DropdownMenu id={menuId} class={className}> <DropdownMenu id={menuId} class={className}>
{#each displayed as tag, i} {#each displayed as tag, i}

View file

@ -110,8 +110,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
activeName = current; activeName = current;
appendTagAndFocusAt(index, splitOff); appendTagAndFocusAt(index, splitOff);
active = null;
await tick(); await tick();
if (index === active) {
// splitOff tag was rejected
return;
}
input.setSelectionRange(0, 0); input.setSelectionRange(0, 0);
} }
@ -127,8 +133,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
tags = tags; tags = tags;
console.log("dt", activeAfterBlur, index); console.log("dt", activeAfterBlur, index);
if (active !== null && active > index) { if (activeAfterBlur !== null && activeAfterBlur > index) {
active--; activeAfterBlur--;
} }
return deleted; return deleted;
@ -138,6 +144,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
const deleted = tags.splice(index, 1)[0]; const deleted = tags.splice(index, 1)[0];
tags = tags; tags = tags;
console.log("dta", active, activeAfterBlur, index, JSON.stringify(tags));
if (activeAfterBlur === index) { if (activeAfterBlur === index) {
activeAfterBlur = null; activeAfterBlur = null;
} else if (activeAfterBlur !== null && activeAfterBlur > index) { } else if (activeAfterBlur !== null && activeAfterBlur > index) {
@ -227,7 +234,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
search={tags[active ?? -1]?.name ?? ""} search={tags[active ?? -1]?.name ?? ""}
on:autocomplete={onAutocomplete} on:autocomplete={onAutocomplete}
let:updateAutocomplete let:updateAutocomplete
let:destroyAutocomplete
> >
<TagInput <TagInput
id={tag.id} id={tag.id}
@ -247,7 +253,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
on:tagaccept={() => { on:tagaccept={() => {
console.log("accept", tag, index, activeName); console.log("accept", tag, index, activeName);
deleteActiveTagIfNotUnique(tag, index); deleteActiveTagIfNotUnique(tag, index);
destroyAutocomplete();
decideNextActive(); decideNextActive();
tag.name = activeName; tag.name = activeName;
}} }}
@ -267,13 +272,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
class="tag-spacer flex-grow-1 align-self-stretch" class="tag-spacer flex-grow-1 align-self-stretch"
on:click={appendEmptyTag} on:click={appendEmptyTag}
/> />
<div>
a, aab, an, ac: {active}
{activeAfterBlur} "{activeName}";
<br />
{JSON.stringify(tags)}
</div>
</ButtonToolbar> </ButtonToolbar>
</div> </div>
</StickyBottom> </StickyBottom>