From 6f47489529bcefdcddd92d7958889fcb67710b25 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hannes=20K=C3=BCttner?=
 <4376726+hanneskuettner@users.noreply.github.com>
Date: Tue, 23 Apr 2024 18:16:31 +0200
Subject: [PATCH] Fix deselection of item in Collection Item Dropdown (#22294)

* Fix collection item deselect by setting it to null

* Add changeset
---
 .changeset/twelve-sloths-beg.md                              | 5 +++++
 .../collection-item-dropdown/collection-item-dropdown.vue    | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/twelve-sloths-beg.md

diff --git a/.changeset/twelve-sloths-beg.md b/.changeset/twelve-sloths-beg.md
new file mode 100644
index 0000000000..9c679e4958
--- /dev/null
+++ b/.changeset/twelve-sloths-beg.md
@@ -0,0 +1,5 @@
+---
+'@directus/app': patch
+---
+
+Fixed the deselection of a saved item in the Collection Item Dropdown
diff --git a/app/src/interfaces/collection-item-dropdown/collection-item-dropdown.vue b/app/src/interfaces/collection-item-dropdown/collection-item-dropdown.vue
index c6f2eff07b..8789377cdf 100644
--- a/app/src/interfaces/collection-item-dropdown/collection-item-dropdown.vue
+++ b/app/src/interfaces/collection-item-dropdown/collection-item-dropdown.vue
@@ -118,7 +118,7 @@ function onSelection(selectedIds: (number | string)[] | null) {
 
 			<template #append>
 				<template v-if="displayItem">
-					<v-icon v-tooltip="t('deselect')" name="close" class="deselect" @click.stop="$emit('input', undefined)" />
+					<v-icon v-tooltip="t('deselect')" name="close" class="deselect" @click.stop="value = null" />
 				</template>
 				<template v-else>
 					<v-icon class="expand" name="expand_more" />