feat: harden textarea auto height algorithm (#985)

Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/985
Reviewed-by: konrad <k@knt.li>
Co-authored-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
Co-committed-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>

package.json

@@ -96,7 +96,8 @@
     "env": {
       "browser": true,
       "es2021": true,
-      "node": true
+      "node": true,
+      "vue/setup-compiler-macros": true
     },
     "extends": [
       "eslint:recommended",
@@ -120,6 +121,7 @@
         "error",
         "never"
       ],
+      "vue/script-setup-uses-vars": "error",
       "vue/multi-word-component-names": 0
     },
     "parser": "vue-eslint-parser",

src/components/tasks/add-task.vue

@@ -3,17 +3,13 @@
 		<div class="field is-grouped">
 			<p class="control has-icons-left is-expanded">
 				<textarea
-					:disabled="taskService.loading || null"
+					:disabled="taskService.loading || undefined"
-					class="input"
+					class="add-task-textarea input"
 					:placeholder="$t('list.list.addPlaceholder')"
-					cols="1"
+					rows="1"
 					v-focus
 					v-model="newTaskTitle"
 					ref="newTaskInput"
-					:style="{
-						'minHeight': `${initialTextAreaHeight}px`,
-						'height': `calc(${textAreaHeight}px - 2px + 1rem)`
-					}"
 					@keyup="errorMessage = ''"
 					@keydown.enter="handleEnter"
 				/>
@@ -23,7 +19,8 @@
 			</p>
 			<p class="control">
 				<x-button
-					:disabled="newTaskTitle === '' || taskService.loading || null"
+					class="add-task-button"
+					:disabled="newTaskTitle === '' || taskService.loading || undefined"
 					@click="addTask()"
 					icon="plus"
 					:loading="taskService.loading"
@@ -35,121 +32,172 @@
 		<p class="help is-danger" v-if="errorMessage !== ''">
 			{{ errorMessage }}
 		</p>
-		<quick-add-magic v-if="errorMessage === ''"/>
+		<quick-add-magic v-else />
 	</div>
 </template>
 
-<script>
+<script setup lang="ts">
+import {ref, watch, unref, shallowReactive} from 'vue'
+import {useI18n} from 'vue-i18n'
+import {useStore} from 'vuex'
+import { tryOnMounted, debouncedWatch, useWindowSize, MaybeRef } from '@vueuse/core'
+
 import TaskService from '../../services/task'
 import QuickAddMagic from '@/components/tasks/partials/quick-add-magic.vue'
 
-const INPUT_BORDER_PX = 2
+function cleanupTitle(title: string) {
-const LINE_HEIGHT = 1.5 // using getComputedStyles().lineHeight returns an (wrong) absolute pixel value, we need the factor to do calculations with it.
-
-const cleanupTitle = title => {
 	return title.replace(/^((\* |\+ |- )(\[ \] )?)/g, '')
 }
 
-export default {
+function useAutoHeightTextarea(value: MaybeRef<string>) {
-	name: 'add-task',
+	const textarea = ref<HTMLInputElement>()
-	emits: ['taskAdded'],
+	const minHeight = ref(0)
-	data() {
+
-		return {
+	// adapted from https://github.com/LeaVerou/stretchy/blob/47f5f065c733029acccb755cae793009645809e2/src/stretchy.js#L34
-			newTaskTitle: '',
+	function resize(textareaEl: HTMLInputElement|undefined) {
-			taskService: new TaskService(),
+		if (!textareaEl) return
-			errorMessage: '',
+
-			textAreaHeight: null,
+		let empty
-			initialTextAreaHeight: null,
+
+		// the value here is the the attribute value
+		if (!textareaEl.value && textareaEl.placeholder) {
+			empty = true
+			textareaEl.value = textareaEl.placeholder
 		}
-	},
+
-	components: {
+		const cs = getComputedStyle(textareaEl)
-		QuickAddMagic,
+
-	},
+		textareaEl.style.minHeight = ''
-	props: {
+		textareaEl.style.height = '0'
-		defaultPosition: {
+		const offset = textareaEl.offsetHeight - parseFloat(cs.paddingTop) - parseFloat(cs.paddingBottom)
-			type: Number,
+		const height = textareaEl.scrollHeight + offset + 'px'
-			required: false,
+
+		textareaEl.style.height = height
+
+		// calculate min-height for the first time
+		if (!minHeight.value) {
+			minHeight.value = parseFloat(height)
+		}
+
+		textareaEl.style.minHeight = minHeight.value.toString()
+
+
+		if (empty) {
+			textareaEl.value = ''
+		}
+
+	}
+
+	tryOnMounted(() => {
+		if (textarea.value) {
+			// we don't want scrollbars
+			textarea.value.style.overflowY = 'hidden'
+		}
+	})
+
+	const { width: windowWidth } = useWindowSize()
+
+	debouncedWatch(
+		windowWidth,
+		() => resize(textarea.value),
+		{ debounce: 200 },
+	)
+
+	// It is not possible to get notified of a change of the value attribute of a textarea without workarounds (setTimeout) 
+	// So instead we watch the value that we bound to it.
+	watch(
+		() => [textarea.value, unref(value)],
+		() => resize(textarea.value),
+		{
+			immediate: true, // calculate initial size
+			flush: 'post', // resize after value change is rendered to DOM
 		},
+	)
+
+	return textarea
+}
+
+const emit = defineEmits(['taskAdded'])
+
+
+const props = defineProps({
+	defaultPosition: {
+		type: Number,
+		required: false,
 	},
-	watch: {
+})
-		newTaskTitle(newVal) {
-			// Calculating the textarea height based on lines of input in it.
-			// That is more reliable when removing a line from the input.
-			const numberOfLines = newVal.split(/\r\n|\r|\n/).length
-			const fontSize = parseFloat(window.getComputedStyle(this.$refs.newTaskInput, null).getPropertyValue('font-size'))
 
-			this.textAreaHeight = numberOfLines * fontSize * LINE_HEIGHT + INPUT_BORDER_PX
+const taskService = shallowReactive(new TaskService())
-		},
+const errorMessage = ref('')
-	},
-	mounted() {
-		this.initialTextAreaHeight = this.$refs.newTaskInput.scrollHeight + INPUT_BORDER_PX
-	},
-	methods: {
-		async addTask() {
-			if (this.newTaskTitle === '') {
-				this.errorMessage = this.$t('list.create.addTitleRequired')
-				return
-			}
-			this.errorMessage = ''
 
-			if (this.taskService.loading) {
+const newTaskTitle = ref('')
-				return
+const newTaskInput = useAutoHeightTextarea(newTaskTitle)
-			}
 
-			const newTasks = this.newTaskTitle.split(/[\r\n]+/).map(async t => {
+const { t } = useI18n()
-				const title = cleanupTitle(t)
+const store = useStore()
-				if (title === '') {
-					return
-				}
 
-				const task = await this.$store.dispatch('tasks/createNewTask', {
+async function addTask() {
-					title,
+	if (newTaskTitle.value === '') {
-					listId: this.$store.state.auth.settings.defaultListId,
+		errorMessage.value = t('list.create.addTitleRequired')
-					position: this.defaultPosition,
+		return
-				})
+	}
-				this.$emit('taskAdded', task)
+	errorMessage.value = ''
-				return task
-			})
 
-			try {
+	if (taskService.loading) {
-				await Promise.all(newTasks)
+		return
-				this.newTaskTitle = ''
+	}
-			} catch (e) {
-				if (e.message === 'NO_LIST') {
-					this.errorMessage = this.$t('list.create.addListRequired')
-					return
-				}
-				throw e
-			}
-		},
-		handleEnter(e) {
-			// when pressing shift + enter we want to continue as we normally would. Otherwise, we want to create 
-			// the new task(s). The vue event modifier don't allow this, hence this method.
-			if (e.shiftKey) {
-				return
-			}
 
-			e.preventDefault()
+	const taskTitleBackup = newTaskTitle.value
-			this.addTask()
+	const newTasks = newTaskTitle.value.split(/[\r\n]+/).map(async uncleanedTitle => {
-		},
+		const title = cleanupTitle(uncleanedTitle)
-	},
+		if (title === '') {
+			return
+		}
+
+		const task = await store.dispatch('tasks/createNewTask', {
+			title,
+			listId: store.state.auth.settings.defaultListId,
+			position: props.defaultPosition,
+		})
+		emit('taskAdded', task)
+		return task
+	})
+
+	try {
+		newTaskTitle.value = ''
+		await Promise.all(newTasks)
+	} catch (e: any) {
+		newTaskTitle.value = taskTitleBackup
+		if (e?.message === 'NO_LIST') {
+			errorMessage.value = t('list.create.addListRequired')
+			return
+		}
+		throw e
+	}
+}
+
+function handleEnter(e: KeyboardEvent) {
+	// when pressing shift + enter we want to continue as we normally would. Otherwise, we want to create 
+	// the new task(s). The vue event modifier don't allow this, hence this method.
+	if (e.shiftKey) {
+		return
+	}
+
+	e.preventDefault()
+	addTask()
 }
 </script>
 
 <style lang="scss" scoped>
 .task-add {
 	margin-bottom: 0;
-
-	.button {
-		height: 2.5rem;
-	}
 }
 
-.input, .textarea {
+.add-task-button {
+	height: 2.5rem;
+}
+.add-task-textarea {
 	transition: border-color $transition;
-}
+	resize: none;
-
-.input {
-	resize: vertical;
 }
 </style>