From 9597e0a2502bb5c050a2121119e42902413a8cef Mon Sep 17 00:00:00 2001
From: Bhasher <github.it@bhasher.com>
Date: Fri, 12 Jan 2024 00:29:17 +0100
Subject: [PATCH] Fix modalcard key issue

---
 .../src/lib/components/card/ModalCard.svelte     | 16 +++++++++++-----
 .../src/lib/components/project/Column.svelte     | 16 +++++++++-------
 .../src/lib/components/tags/ModalTagValue.svelte |  3 ++-
 3 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/frontend/src/lib/components/card/ModalCard.svelte b/frontend/src/lib/components/card/ModalCard.svelte
index 1a450dd..01bf79f 100644
--- a/frontend/src/lib/components/card/ModalCard.svelte
+++ b/frontend/src/lib/components/card/ModalCard.svelte
@@ -8,8 +8,8 @@
 	export let card: Card;
 	export let showModal: boolean;
 
-	let newTitle = card.title;
-	let newContent = card.content;
+	let newTitle: string = card.title;
+	let newContent: string = card.content;
 
 	async function save(closeModal: boolean = true) {
 		if (card.title !== newTitle || card.content !== newContent) {
@@ -21,22 +21,28 @@
 	}
 </script>
 
+<svelte:window
+	on:keydown|once={(e) => {
+		if (e.key === 'Escape') return save(true);
+	}}
+/>
+
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
-<div class="modal" on:click={() => save(true)}>
+<div class="modal" on:click|self|preventDefault={() => save(true)}>
 	<div class="content" on:click|stopPropagation>
 		<div class="header">
 			<input class="title" bind:value={newTitle} on:blur={() => save(false)} />
 			<div class="buttons">
 				<button
-					on:click={async () => {
+					on:click|once={async () => {
 						await card.delete();
 						showModal = false;
 					}}
 				>
 					<TrashIcon />
 				</button>
-				<button on:click={() => (showModal = false)}>
+				<button on:click|once={() => (showModal = false)}>
 					<CloseIcon />
 				</button>
 			</div>
diff --git a/frontend/src/lib/components/project/Column.svelte b/frontend/src/lib/components/project/Column.svelte
index 75f01bd..f944812 100644
--- a/frontend/src/lib/components/project/Column.svelte
+++ b/frontend/src/lib/components/project/Column.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-	import Card, { cards } from '$lib/types/Card';
-	import CardComponent from '../card/Card.svelte';
-	import AddIcon from '../icons/AddIcon.svelte';
-	import type TagOption from '$lib/types/TagOption';
-	import ProjectTag, { projectTags } from '$lib/types/ProjectTag';
-	import type Project from '$lib/types/Project';
 	import currentDraggedCard from '$lib/stores/currentDraggedCard';
 	import currentView from '$lib/stores/currentView';
+	import Card, { cards } from '$lib/types/Card';
+	import type Project from '$lib/types/Project';
+	import ProjectTag, { projectTags } from '$lib/types/ProjectTag';
+	import type TagOption from '$lib/types/TagOption';
+	import CardComponent from '../card/Card.svelte';
+	import AddIcon from '../icons/AddIcon.svelte';
 
 	export let project: Project;
 	export let option: TagOption | null = null;
@@ -45,6 +45,8 @@
 
 		if (!card) return;
 
+		await card.updateTitle(`untitled ${card.id}`);
+
 		if ($currentView?.filters && $currentView.filters.length > 0) {
 			for (const projectTag of $projectTags) {
 				for (const filter of $currentView.filters) {
@@ -105,7 +107,7 @@
 		</span>
 	</header>
 	<ul>
-		{#each columnCards as card}
+		{#each columnCards as card (card.id)}
 			<CardComponent {card} />
 		{/each}
 	</ul>
diff --git a/frontend/src/lib/components/tags/ModalTagValue.svelte b/frontend/src/lib/components/tags/ModalTagValue.svelte
index a1a21f2..7b482a4 100644
--- a/frontend/src/lib/components/tags/ModalTagValue.svelte
+++ b/frontend/src/lib/components/tags/ModalTagValue.svelte
@@ -15,7 +15,8 @@
 {#if tagType}
 	<td>
 		{#if tagType?.hasOptions}
-			<SelectTags multiple={false} {projectTag} {card} {cardTag} />
+			<!-- multiple={false} -->
+			<SelectTags {projectTag} {card} {cardTag} />
 		{:else if !tagType?.hasOptions}
 			<input />
 		{/if}