feat(task): cancel editing task title with escape (#2730)
Some checks failed
continuous-integration/drone/push Build is failing
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:  # 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:
parent
4c74a3f859
commit
faff1040dc
@ -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>
|
||||
|
Loading…
x
Reference in New Issue
Block a user