Merge branch 'safari-metadata-multiselect-removing-entries' of Arnei/opencast-admin-interface into r/19.x

Pull request #1496

  Fix multi-select values in metadata not removable (Safari)

Author: gregorydlogan

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