From d75c20ea48e8501c3d558fd774b33b16b0df5516 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Fri, 15 Dec 2023 19:01:08 +0100
Subject: [PATCH] feat(filter): add auto resize for filter query input

---
 .../project/partials/FilterInput.vue          | 20 +++++++++++++++----
 frontend/src/components/tasks/add-task.vue    |  2 +-
 .../src/composables/useAutoHeightTextarea.ts  | 13 +++++++-----
 3 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/project/partials/FilterInput.vue b/frontend/src/components/project/partials/FilterInput.vue
index 52e41acd9..d58ad687e 100644
--- a/frontend/src/components/project/partials/FilterInput.vue
+++ b/frontend/src/components/project/partials/FilterInput.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import {computed, ref, watch} from 'vue'
+import {useAutoHeightTextarea} from '@/composables/useAutoHeightTextarea'
 
 const {
 	modelValue,
@@ -8,6 +9,10 @@ const {
 }>()
 
 const filterQuery = ref('')
+const {
+	textarea: filterInput,
+	height,
+} = useAutoHeightTextarea(filterQuery)
 
 watch(
 	() => modelValue,
@@ -88,14 +93,19 @@ function escapeHtml(unsafe: string): string {
 				spellcheck="false"
 				v-model="filterQuery"
 				class="input"
+				ref="filterInput"
 			></textarea>
-			<div class="filter-input-highlight" v-html="highlightedFilterQuery"></div>
+			<div 
+				class="filter-input-highlight" 
+				:style="{'height': height}"
+				v-html="highlightedFilterQuery"
+			></div>
 		</div>
 	</div>
 </template>
 
 <style lang="scss">
-.filter-input-highlight span {	
+.filter-input-highlight span {
 	&.filter-query__field {
 		color: #faf594;
 	}
@@ -113,18 +123,20 @@ function escapeHtml(unsafe: string): string {
 <style lang="scss" scoped>
 .filter-input {
 	position: relative;
-	
+
 	textarea {
 		position: absolute;
 		text-fill-color: transparent;
 		-webkit-text-fill-color: transparent;
 		background: transparent !important;
+		resize: none;
 	}
-	
+
 	.filter-input-highlight {
 		height: 2.5em;
 		line-height: 1.5;
 		padding: .5em .75em;
+		word-break: break-word;
 	}
 }
 </style>
diff --git a/frontend/src/components/tasks/add-task.vue b/frontend/src/components/tasks/add-task.vue
index 9168a90f0..ffc5c6430 100644
--- a/frontend/src/components/tasks/add-task.vue
+++ b/frontend/src/components/tasks/add-task.vue
@@ -77,7 +77,7 @@ const props = defineProps({
 const emit = defineEmits(['taskAdded'])
 
 const newTaskTitle = ref('')
-const newTaskInput = useAutoHeightTextarea(newTaskTitle)
+const {textarea: newTaskInput} = useAutoHeightTextarea(newTaskTitle)
 
 const {t} = useI18n({useScope: 'global'})
 const authStore = useAuthStore()
diff --git a/frontend/src/composables/useAutoHeightTextarea.ts b/frontend/src/composables/useAutoHeightTextarea.ts
index b1f1d0484..3baf6b109 100644
--- a/frontend/src/composables/useAutoHeightTextarea.ts
+++ b/frontend/src/composables/useAutoHeightTextarea.ts
@@ -6,6 +6,7 @@ import {debouncedWatch, tryOnMounted, useWindowSize, type MaybeRef} from '@vueus
 export function useAutoHeightTextarea(value: MaybeRef<string>) {
 	const textarea = ref<HTMLTextAreaElement | null>(null)
 	const minHeight = ref(0)
+	const height = ref('')
 
 	// adapted from https://github.com/LeaVerou/stretchy/blob/47f5f065c733029acccb755cae793009645809e2/src/stretchy.js#L34
 	function resize(textareaEl: HTMLTextAreaElement | null) {
@@ -23,14 +24,13 @@ export function useAutoHeightTextarea(value: MaybeRef<string>) {
 
 		textareaEl.style.minHeight = ''
 		textareaEl.style.height = '0'
-		const offset = textareaEl.offsetHeight - parseFloat(cs.paddingTop) - parseFloat(cs.paddingBottom)
-		const height = textareaEl.scrollHeight + offset + 'px'
+		height.value = textareaEl.scrollHeight + 'px'
 
-		textareaEl.style.height = height
+		textareaEl.style.height = height.value
 
 		// calculate min-height for the first time
 		if (!minHeight.value) {
-			minHeight.value = parseFloat(height)
+			minHeight.value = parseFloat(height.value)
 		}
 
 		textareaEl.style.minHeight = minHeight.value.toString()
@@ -68,5 +68,8 @@ export function useAutoHeightTextarea(value: MaybeRef<string>) {
 		},
 	)
 
-	return textarea
+	return {
+		textarea,
+		height,
+	}
 }
\ No newline at end of file