From 33fc00192eb7b264fe6926cacc670e614eb3048f Mon Sep 17 00:00:00 2001
From: SP12893678 <36910625+SP12893678@users.noreply.github.com>
Date: Mon, 15 Jul 2024 23:17:15 +0800
Subject: [PATCH] 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           |  5 +++++
 .../select-dropdown/select-dropdown.vue       | 20 ++++++++++++++++---
 contributors.yml                              |  1 +
 3 files changed, 23 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/forty-seahorses-occur.md

diff --git a/.changeset/forty-seahorses-occur.md b/.changeset/forty-seahorses-occur.md
new file mode 100644
index 0000000000..0ba836c2bf
--- /dev/null
+++ b/.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
diff --git a/app/src/interfaces/select-dropdown/select-dropdown.vue b/app/src/interfaces/select-dropdown/select-dropdown.vue
index 48897b32f2..26ffc741ea 100644
--- a/app/src/interfaces/select-dropdown/select-dropdown.vue
+++ b/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>
diff --git a/contributors.yml b/contributors.yml
index a1d024498a..7daa4701f3 100644
--- a/contributors.yml
+++ b/contributors.yml
@@ -141,3 +141,4 @@
 - Dominic-Preap
 - brandondrew
 - alantiller
+- SP12893678