Auto reset value when options updated on select dropdown interface (#23007)

Co-authored-by: Pascal Jufer <pascal-jufer@bluewin.ch>

.changeset/forty-seahorses-occur.md

@@ -0,0 +1,5 @@
+---
+"@directus/app": patch
+---
+
+Added auto reset of value to dropdown interface after conditional update of options

app/src/interfaces/select-dropdown/select-dropdown.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { computed } from 'vue';
 import { i18n } from '@/lang';
+import { isEmpty, isEqual } from 'lodash';
+import { computed, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { isEmpty } from 'lodash';
 
 type Option = {
 	text: string;
@@ -27,7 +27,7 @@ const props = withDefaults(
 	},
 );
 
-defineEmits(['input']);
+const emit = defineEmits(['input']);
 
 const { t } = useI18n();
 
@@ -66,6 +66,20 @@ const showGlobalIcon = computed(() => {
 
 	return false;
 });
+
+watch(
+	() => props.choices,
+	(newChoices, oldChoices) => {
+		if (
+			props.value !== null &&
+			!isEqual(newChoices, oldChoices) &&
+			!newChoices?.some((choice) => choice.value === props.value)
+		) {
+			// Reset if the options have dynamically changed and the current value is not available anymore
+			emit('input', null);
+		}
+	},
+);
 </script>
 
 <template>

contributors.yml

@@ -141,3 +141,4 @@
 - Dominic-Preap
 - brandondrew
 - alantiller
+- SP12893678