From faff1040dcdcf7eaa968a18c15942ef533b90d46 Mon Sep 17 00:00:00 2001 From: DanielPantle Date: Wed, 2 Oct 2024 07:32:33 +0000 Subject: [PATCH] feat(task): cancel editing task title with escape (#2730) With this change, it is possible to cancel editing the task title with pressing the escape key. # Problem Before it was not possible to cancel editing the task title. Pressing outside the title saves the changes that have already been done (which is intended I think). But when e.g. pasting something with a wrong format, I was not able to revert the change without saving and editing it again Example: after accidentially pasting something with multiple lines it is not possible to escape, the only way to revert this is to save and edit again manually: ![grafik.png](/attachments/11d3559a-3111-458f-9a9c-4107292054fa) # Solution This PR implements a listener for the escape key that sets the title back to its original value and blurs the focus of the title # Additional notes - I checked this in the "page" view of the task and the "popup" view and it worked in both. For me, the popup does not close with the escape key (as it often does on other sites), therefore there is no collision with this function. But I think it would be good to check this again to make sure it does not break anything like this - I don't know anything about testing in this repository, if it is possible/necessary to implement a test for this feature please leave a comment :) Co-authored-by: Daniel Pantle Reviewed-on: https://kolaente.dev/vikunja/vikunja/pulls/2730 Co-authored-by: DanielPantle Co-committed-by: DanielPantle --- frontend/src/components/tasks/partials/Heading.vue | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/frontend/src/components/tasks/partials/Heading.vue b/frontend/src/components/tasks/partials/Heading.vue index 9cb44bfba..71339161e 100644 --- a/frontend/src/components/tasks/partials/Heading.vue +++ b/frontend/src/components/tasks/partials/Heading.vue @@ -30,6 +30,7 @@ :spellcheck="false" @blur="save(($event.target as HTMLInputElement).textContent as string)" @keydown.enter.prevent.stop="($event.target as HTMLInputElement).blur()" + @keydown.esc.prevent.stop="cancel($event.target as HTMLInputElement)" > {{ task.title.trim() }} @@ -133,6 +134,11 @@ async function save(title: string) { saving.value = false } } + +async function cancel(element: HTMLInputElement) { + element.textContent = props.task.title + element.blur() +}