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.

Author: Arnei

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) => (

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);