fix/multiselect fields by Tab navigation

Author: EnsiyehE

src/components/events/partials/ModalTabsAndPages/NewMetadataPage.tsx

@@ -18,7 +18,6 @@ const NewMetadataPage = ({
 	header?: ParseKeys
 }) => {
 	const { t } = useTranslation();
-	console.log(metadataCatalogs);
 	return (
 		<ModalContentTable>
 			{

src/components/shared/DropDown.tsx

@@ -209,7 +209,7 @@ const DropDown = <T, >({
 		<AsyncSelect
 			ref={selectRef}
 			{...commonProps}
-            openMenuOnFocus={false}
+			openMenuOnFocus={false}
 			noOptionsMessage={() => t("SELECT_NO_MATCHING_RESULTS")}
 			cacheOptions
 			defaultOptions={formatOptions(

src/components/shared/wizard/RenderMultiField.tsx

@@ -83,9 +83,7 @@ const RenderMultiField = ({
 
 			// reset inputValue
 			setInputValue("");
-		} else {
-		setEditMode(false);
-	}
+		}
 	};
 
 	// Remove item/value from inserted field values
@@ -118,6 +116,10 @@ const RenderMultiField = ({
 				field={field}
 				form={form}
 				showCheck={showCheck}
+				onBlur = {() => {
+					submitValue();
+					setEditMode(false);
+				}}
 			/>
 		)
 	);
@@ -199,16 +201,26 @@ const ShowValue = ({
 	form: { initialValues },
 	field,
 	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"
 			>
 			{field.value instanceof Array && field.value.length !== 0 ? (

src/hooks/wizardHooks.ts

@@ -118,6 +118,17 @@ 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
+        }
+
 		// Adding event listener for detecting click outside
 		window.addEventListener("mousedown", handleClickOutside);