Input translated string improvements (#12869)

* Input translated string improvements

* Update app/src/interfaces/_system/system-input-translated-string/input-translated-string.vue

Co-authored-by: Rijk van Zanten <rijkvanzanten@me.com>

app/src/interfaces/_system/system-input-translated-string/input-translated-string.vue

@@ -10,6 +10,9 @@
 					:disabled="disabled"
 					:active="active"
 					@update:model-value="localValue = $event"
+					@focus="isFocused = true"
+					@blur="blur"
+					@keydown.enter="checkKeyValidity"
 				>
 					<template v-if="hasValidKey" #input>
 						<button :disabled="disabled" @click.stop="setValue(null)">{{ value && getKeyWithoutPrefix(value) }}</button>
@@ -20,6 +23,7 @@
 							class="translate-icon"
 							:class="{ active }"
 							clickable
+							:tabindex="-1"
 							:disabled="disabled"
 							@click="toggle"
 						/>
@@ -108,6 +112,7 @@ const { t } = useI18n();
 
 const menuEl = ref();
 const hasValidKey = ref<boolean>(false);
+const isFocused = ref<boolean>(false);
 const searchValue = ref<string | null>(null);
 
 const { translationStrings } = useTranslationStrings();
@@ -150,18 +155,19 @@ function selectKey(key: string) {
 	searchValue.value = null;
 }
 
-function setValue(newValue: any) {
-	hasValidKey.value = false;
-
-	if (
-		newValue &&
-		newValue.startsWith(translationPrefix) &&
-		translations.value.find((t) => t.key?.includes(getKeyWithoutPrefix(newValue)))
-	) {
-		hasValidKey.value = true;
-	}
-
+function setValue(newValue: string | null) {
+	if (newValue?.startsWith(translationPrefix)) newValue = newValue.replace(/\s/g, '_');
 	localValue.value = newValue;
+	if (!isFocused.value) checkKeyValidity();
+}
+
+function blur() {
+	isFocused.value = false;
+	checkKeyValidity();
+}
+
+function checkKeyValidity() {
+	hasValidKey.value = localValue.value?.startsWith(translationPrefix) ?? false;
 }
 
 function openNewTranslationStringDialog() {