diff --git a/packages/client/src/components/form/textarea.vue b/packages/client/src/components/form/textarea.vue
index e4bd26706..3217a988f 100644
--- a/packages/client/src/components/form/textarea.vue
+++ b/packages/client/src/components/form/textarea.vue
@@ -12,7 +12,7 @@
 			:readonly="readonly"
 			:placeholder="placeholder"
 			:pattern="pattern"
-			:autocomplete="autocomplete"
+			:autocomplete="autocompleteValue"
 			:spellcheck="spellcheck"
 			@focus="focused = true"
 			@blur="focused = false"
@@ -27,7 +27,7 @@
 </template>
 
 <script lang="ts" setup>
-import { defineComponent, onMounted, onUnmounted, nextTick, ref, watch, computed, toRefs } from 'vue';
+import { onMounted, nextTick, ref, watch, computed, toRefs } from 'vue';
 import { debounce } from 'throttle-debounce';
 import MkButton from '@/components/ui/button.vue';
 import { i18n } from '@/i18n';
@@ -62,34 +62,38 @@ const props = withDefaults(defineProps<{
 	manualSave: false,
 });
 
-const { modelValue, autofocus } = toRefs(props);
+const { modelValue } = toRefs(props);
 // modelValue is read only, so a separate ref is needed.
 const v = $ref(modelValue.value);
 
-const focused = $ref(false);
-const changed = $ref(false);
-const invalid = $ref(false);
-const filled = computed(() => modelValue.value !== '' && modelValue.value != null);
-const inputEl = $ref(null);
+const focused = ref(false);
+const changed = ref(false);
+const invalid = ref(false);
+const inputEl = ref<HTMLTextAreaElement | null>(null);
+const autocompleteValue = computed(() => props.autocomplete ? 'on' : 'off');
 
-const focus = () => inputEl.focus();
-const onInput = evt => {
-	changed = true;
+const focus = (): void => {
+	if (inputEl.value) {
+		inputEl.value.focus();
+	}
+};
+const onInput = (evt: any): void => {
+	changed.value = true;
 	emit('change', evt);
 };
-const onKeydown = (evt: KeyboardEvent) => {
+const onKeydown = (evt: KeyboardEvent): void => {
 	emit('keydown', evt);
 	if (evt.code === 'Enter') {
 		emit('enter');
 	}
 };
-const updated = () => {
-	changed = false;
+const updated = (): void => {
+	changed.value = false;
 	emit('update:modelValue', v);
 };
 const debouncedUpdated = debounce(1000, updated);
 
-watch(modelValue, newValue => {
+watch(modelValue, () => {
 	if (!props.manualSave) {
 		if (props.debounce) {
 			debouncedUpdated();
@@ -98,14 +102,13 @@ watch(modelValue, newValue => {
 		}
 	}
 
-	invalid = inputEl.validity.badInput;
+	invalid.value = inputEl.value?.validity.badInput || true;
 });
 
-
 onMounted(() => {
 	nextTick(() => {
-		if (props.autofocus) {
-			inputEl.focus();
+		if (props.autofocus && inputEl.value) {
+			inputEl.value.focus();
 		}
 	});
 });