Repository: directus/directus
File: app/src/interfaces/_system/system-input-translated-string/input-translated-string.vue (Vue)

Code before:

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 openNewCustomTranslationDrawer() {
	menuEl.value.deactivate();
	isCustomTranslationDrawerOpen.value = true;
}

const newTranslationDefaults = computed(() => ({
	language: getCurrentLanguage(),
	value: localValue.value,
	key: snakeCase(localValue.value ?? ''),
}));
</script>

<template>
	<div class="input-translated-string">
		<v-menu ref="menuEl" :disabled="disabled" :close-on-content-click="false" attached>
			<template #activator="{ toggle, active }">
				<v-input
					class="translation-input"
					:model-value="localValue"
					:autofocus="autofocus"
					:placeholder="placeholder"
					: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>
					</template>
					<template #append>
						<v-icon
							name="translate"
							class="translate-icon"

Review comment (suggestion):
I think we should only prefill the key and value fields if it is a plain value (not already translated), as otherwise you'd end up with such values:
<img width="200" src="https://github.com/user-attachments/assets/1746f66d-3cb3-40a2-b4d9-22be7bc8fc90" />

```suggestion
const newTranslationDefaults = computed(() => {
	const defaults = {
		language: getCurrentLanguage(),
	};

	if (localValue.value && !localValue.value.startsWith(translationPrefix)) {
		Object.assign(defaults, {
			key: snakeCase(localValue.value),
			value: localValue.value,
		});
	}

	return defaults;
});
```

Code after:

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 openNewCustomTranslationDrawer() {
	menuEl.value.deactivate();
	isCustomTranslationDrawerOpen.value = true;
}

const newTranslationDefaults = computed(() => {
	const defaults = {
		language: getCurrentLanguage(),
	};

	if (localValue.value && !localValue.value.startsWith(translationPrefix)) {
		Object.assign(defaults, {
			key: snakeCase(localValue.value),
			value: localValue.value,
		});
	}

	return defaults;
});
</script>

<template>
	<div class="input-translated-string">
		<v-menu ref="menuEl" :disabled="disabled" :close-on-content-click="false" attached>
			<template #activator="{ toggle, active }">
				<v-input
					class="translation-input"
					:model-value="localValue"
					:autofocus="autofocus"
					:placeholder="placeholder"
					:disabled="disabled"
					:active="active"
					@update:model-value="localValue = $event"
					@focus="isFocused = true"
					@blur="blur"