feat(task): cancel editing task title with escape (#2730)
Some checks failed
continuous-integration/drone/push Build is failing

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 <daniel.pantle@newtec.de>
Reviewed-on: #2730
Co-authored-by: DanielPantle <danielpantle@noreply.kolaente.dev>
Co-committed-by: DanielPantle <danielpantle@noreply.kolaente.dev>
This commit is contained in:
DanielPantle 2024-10-02 07:32:33 +00:00 committed by konrad
parent 4c74a3f859
commit faff1040dc

View File

@ -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() }}
</h1>
@ -133,6 +134,11 @@ async function save(title: string) {
saving.value = false
}
}
async function cancel(element: HTMLInputElement) {
element.textContent = props.task.title
element.blur()
}
</script>
<style lang="scss" scoped>