Repository: directus/directus
File: app/src/interfaces/tags/tags.vue (Vue)

Code before:
}
</script>

<template>
	<div class="interface-tags">
		<VInput
			v-if="isVariableMode || allowCustom"
			:model-value="isVariableMode ? (value as string) : undefined"
			:placeholder="isVariableMode ? undefined : placeholder || $t('interfaces.tags.add_tags')"
			:disabled="isVariableMode || disabled"
			:non-editable="isVariableMode || nonEditable"
			:dir="direction"
			@keydown="onInput"
			@blur="onInput"
		>
			<template v-if="!isVariableMode && iconLeft" #prepend><VIcon :name="iconLeft" /></template>
			<template #append>
				<VIcon
					v-if="isVariableMode"
					v-tooltip="$t('clear_value')"
					class="remove-variable"
					name="close"
					clickable
					@click.stop="clearVariable"
				/>
				<VIcon v-else :name="iconRight" />
			</template>
		</VInput>
		<div v-if="presetVals.length > 0 || customVals.length > 0" class="tags">
			<span v-if="presetVals.length > 0" class="presets tag-container">
				<VChip
					v-for="preset in presetVals"
					:key="preset"
					:class="['tag', { inactive: !selectedVals.includes(preset), 'non-editable': nonEditable }]"
					:disabled
					:dir="direction"
					small
					label
					clickable
					@click="toggleTag(preset)"
				>
					{{ preset }}
				</VChip>
			</span>
			<span v-if="customVals.length > 0 && allowCustom" class="custom tag-container">
				<VIcon
					v-if="presetVals.length > 0"
					:class="{ disabled: disabled && !nonEditable }"
					class="custom-tags-delimiter"
					name="chevron_right"
				/>

Review comment (suggestion):
Let’s add disabled and non-editable guards to prevent clearing the value when the entire interface is disabled.

```suggestion
					clickable
                    :disabled
                    :non-editable
```

Code after:

function clearVariable() {
	emit('input', null);
}
</script>

<template>
	<div class="interface-tags">
		<VInput
			v-if="isVariableMode || allowCustom"
			:model-value="isVariableMode ? (value as string) : undefined"
			:placeholder="placeholder || $t('interfaces.tags.add_tags')"
			:disabled="isVariableMode || disabled"
			:non-editable="isVariableMode || nonEditable"
			:dir="direction"
			@keydown="onInput"
			@blur="onInput"
		>
			<template v-if="iconLeft" #prepend><VIcon :name="iconLeft" /></template>
			<template #append>
				<VIcon
					v-if="isVariableMode"
					v-tooltip="$t('clear_value')"
					class="remove-variable"
					name="close"
					clickable
					:disabled
					@click.stop="clearVariable"
				/>
				<VIcon v-else :name="iconRight" />
			</template>
		</VInput>
		<div v-if="presetVals.length > 0 || customVals.length > 0" class="tags">
			<span v-if="presetVals.length > 0" class="presets tag-container">
				<VChip
					v-for="preset in presetVals"
					:key="preset"
					:class="['tag', { inactive: !selectedVals.includes(preset), 'non-editable': nonEditable }]"
					:disabled
					:dir="direction"
					small
					label
					clickable
					@click="toggleTag(preset)"
				>
					{{ preset }}
				</VChip>
			</span>
			<span v-if="customVals.length > 0 && allowCustom" class="custom tag-container">
				<VIcon
					v-if="presetVals.length > 0"