From 1cbb93ea9beea3049c469ba7cc05b07beebf2062 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Mon, 27 Nov 2023 12:47:26 +0100
Subject: [PATCH] fix(tasks): make sure tasks are fully clickable

Resolves https://kolaente.dev/vikunja/frontend/issues/3838
---
 .../tasks/partials/singleTaskInProject.vue    | 22 ++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/components/tasks/partials/singleTaskInProject.vue b/src/components/tasks/partials/singleTaskInProject.vue
index 980b97175..f229b8810 100644
--- a/src/components/tasks/partials/singleTaskInProject.vue
+++ b/src/components/tasks/partials/singleTaskInProject.vue
@@ -3,7 +3,10 @@
 		<div
 			:class="{'is-loading': taskService.loading}"
 			class="task loader-container"
-			@click.stop.self="openTaskDetail"
+			@mouseup.stop.self="openTaskDetail"
+			@mousedown.stop.self="focusTaskLink"
+			ref="taskContainerRef"
+			tabindex="-1"
 		>
 			<fancycheckbox
 				:disabled="(isArchived || disabled) && !canMarkAsDone"
@@ -20,6 +23,8 @@
 			<div
 				:class="{ 'done': task.done, 'show-project': showProject && project}"
 				class="tasktext"
+				@mouseup.stop.self="openTaskDetail"
+				@mousedown.stop.self="focusTaskLink"
 			>
 			<span>
 				<router-link
@@ -313,13 +318,24 @@ function hideDeferDueDatePopup(e) {
 }
 
 const taskLink = ref<HTMLElement | null>(null)
+const taskContainerRef = ref<HTMLElement | null>(null)
+
+function hasTextSelected() {
+	const isTextSelected = window.getSelection().toString()
+	return !(typeof isTextSelected === 'undefined' || isTextSelected === '' || isTextSelected === '\n')
+}
 
 function openTaskDetail() {
-	const isTextSelected = window.getSelection().toString()
-	if (!isTextSelected) {
+	if (!hasTextSelected()) {
 		taskLink.value.$el.click()
 	}
 }
+
+function focusTaskLink() {
+	if (!hasTextSelected()) {
+		taskContainerRef.value.focus()
+	}
+}
 </script>
 
 <style lang="scss" scoped>