From 0ae73b57d56d41b4945a1d90b2b754dfcd28f8ef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20H=C3=B6tten?= <s+git@hoetten.org>
Date: Sun, 25 Sep 2022 02:56:09 +0200
Subject: allow to cancel stack title edit
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Simon Hötten <s+git@hoetten.org>
---
 src/components/board/Stack.vue | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/board/Stack.vue b/src/components/board/Stack.vue
index b0755edf..c99af30f 100644
--- a/src/components/board/Stack.vue
+++ b/src/components/board/Stack.vue
@@ -41,7 +41,10 @@
 					@keydown.enter="startEditing(stack)">
 					{{ stack.title }}
 				</h3>
-				<form v-else @submit.prevent="finishedEdit(stack)">
+				<form v-else-if="editing"
+					v-click-outside="cancelEdit"
+					@submit.prevent="finishedEdit(stack)"
+					@keyup.esc="cancelEdit">
 					<input v-model="copiedStack.title"
 						v-focus
 						type="text"
@@ -142,7 +145,7 @@
 </template>
 
 <script>
-
+import ClickOutside from 'vue-click-outside'
 import { mapGetters, mapState } from 'vuex'
 import { Container, Draggable } from 'vue-smooth-dnd'
 
@@ -164,7 +167,9 @@ export default {
 		NcModal,
 		ArchiveIcon,
 	},
-
+	directives: {
+		ClickOutside,
+	},
 	props: {
 		stack: {
 			type: Object,
@@ -274,6 +279,9 @@ export default {
 			}
 			this.editing = false
 		},
+		cancelEdit() {
+			this.editing = false
+		},
 		async clickAddCard() {
 			this.stateCardCreating = true
 			try {
-- 
cgit v1.2.3