From 89a50325bacc5ff3b309984056ff7b21362e68d6 Mon Sep 17 00:00:00 2001
From: Arnei <arnewilken@yahoo.de>
Date: Mon, 5 Jan 2026 12:48:51 +0100
Subject: [PATCH] Fix multi-select values in metadata not removable (Safari)

Fixes a bug where values could not be removed from
multi-select fields, like presenters or contributors in the event
metadata. When clicking on the "X" of the blue box with
the value, the field would leave edit mode but the value
was not removed.

This fix has an unpleasant side effect, where multi-select fields
will not properly blur anymore when left via tab navigation.
I am not sure how to properly fix this with the current code.
---
 .../shared/wizard/RenderMultiField.tsx        | 29 +++++++++----------
 src/hooks/wizardHooks.ts                      | 28 +++++++++++-------
 2 files changed, 32 insertions(+), 25 deletions(-)

diff --git a/src/components/shared/wizard/RenderMultiField.tsx b/src/components/shared/wizard/RenderMultiField.tsx
index 7cd94f5125..213b23a46a 100644
--- a/src/components/shared/wizard/RenderMultiField.tsx
+++ b/src/components/shared/wizard/RenderMultiField.tsx
@@ -206,27 +206,26 @@ const ShowValue = ({
 	showCheck,
 	onBlur,
 }: {
-    setEditMode: (e: boolean) => void
+	setEditMode: (e: boolean) => void
 	form: FieldProps["form"]
 	field: FieldProps["field"]
 	showCheck: boolean,
 	onBlur: () => void
 }) => {
 	return (
-	<div
-		tabIndex={0}
-		onClick={() => setEditMode(true)}
-		onFocus={() => setEditMode(true)}  // <-- activate edit mode on focus
-		onKeyDown={e => {
-			if (e.key === "Enter" || e.key === " ") {
-				setEditMode(true);
-				e.preventDefault();
-			}
-		}}
-
-	  onBlur={onBlur}
-  		className="show-edit"
-			>
+		<div
+			tabIndex={0}
+			onClick={() => setEditMode(true)}
+			onFocus={() => setEditMode(true)}  // <-- activate edit mode on focus
+			onKeyDown={e => {
+				if (e.key === "Enter" || e.key === " ") {
+					setEditMode(true);
+					e.preventDefault();
+				}
+			}}
+			onBlur={onBlur}
+			className="show-edit"
+		>
 			{field.value instanceof Array && field.value.length !== 0 ? (
 				<ul>
 					{field.value.map((item, key) => (
diff --git a/src/hooks/wizardHooks.ts b/src/hooks/wizardHooks.ts
index d986eee686..43555a302b 100644
--- a/src/hooks/wizardHooks.ts
+++ b/src/hooks/wizardHooks.ts
@@ -113,16 +113,24 @@ export const useClickOutsideField = (
 			childRef.current.focus();
 		}
 
-		const handleBlur = (e: FocusEvent) => {
-        // Check if blur moves to an element outside childRef
-        if (childRef.current && !childRef.current.contains(e.relatedTarget as Node)) {
-        setEditMode(false);
-        }
-        };
-
-        if (childRef.current) {
-        childRef.current.addEventListener("blur", handleBlur, true); // capture phase
-        }
+		/* TODO: Fix handleBlur
+			This is supposed to handle blur for tab navigation, which it does.
+			But it also triggers on mouse clicks that are inside the field, causing
+			unintended blurs and sometimes other elements besides the input element
+			to not work. A proper fix should properly set edit mode to false when the
+			field is left via keyboard navigation, but not set edit mode to false when
+			the user is clicking inside of the field.
+		*/
+		// const handleBlur = (e: FocusEvent) => {
+		// // Check if blur moves to an element outside childRef
+		// 	if (childRef.current && !childRef.current.contains(e.relatedTarget as Node)) {
+		// 		setEditMode(false);
+		// 	}
+		// };
+
+		// if (childRef.current) {
+		// 	childRef.current.addEventListener("blur", handleBlur, true); // capture phase
+		// }
 
 		// Adding event listener for detecting click outside
 		window.addEventListener("mousedown", handleClickOutside);