Merge pull request #1041 from Arnei/edit-multifields-in-editmultipleeventsmodal

Fix metadata fields not editable during multi edit

Author: Arnei

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

@@ -122,8 +122,7 @@ const DetailsMetadataTab = ({
 																	) : (
 																		<td className="editable">
 																			{/* Render single value or multi value editable input */}
-																			{field.type === "mixed_text" &&
-																			field.collection?.length !== 0 ? (
+																			{field.type === "mixed_text" ? (
 																				<Field
 																					name={field.id}
 																					fieldInfo={field}

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

@@ -48,8 +48,7 @@ const NewMetadataPage = ({
 															</td>
 															{field.readOnly ? (
 																// non-editable field if readOnly is set or user doesn't have edit access rights
-																!!field.collection &&
-																field.collection.length !== 0 ? (
+																!!field.collection ? (
 																	<td>{getMetadataCollectionFieldName(field, field, t)}</td>
 																) : (
 																	<td>{field.value}</td>

src/components/events/partials/modals/EditMetadataEventsModal.tsx

@@ -250,9 +250,7 @@ const EditMetadataEventsModal = ({
 																		</td>
 																		<td className="editable ng-isolated-scope">
 																			{/* Render single value or multi value input */}
-																			{metadata.type === "mixed_text" &&
-																			!!metadata.collection &&
-																			metadata.collection.length !== 0 ? (
+																			{metadata.type === "mixed_text" ? (
 																				<Field
 																					name={metadata.id}
 																					fieldInfo={metadata}

src/components/shared/wizard/RenderMultiField.tsx

@@ -87,9 +87,9 @@ const RenderMultiField = ({
 		// (types: see metadata.json retrieved from backend)
 		editMode ? (
 			<>
-				{fieldInfo.type === "mixed_text" && !!fieldInfo.collection ? (
+				{fieldInfo.type === "mixed_text" && (
 					<EditMultiSelect
-						collection={fieldInfo.collection}
+						collection={fieldInfo.collection ? fieldInfo.collection : []}
 						field={field}
 						fieldValue={fieldValue}
 						inputValue={inputValue}
@@ -98,18 +98,6 @@ const RenderMultiField = ({
 						handleKeyDown={handleKeyDown}
 						handleBlur={submitValue}
 					/>
-				) : (
-					fieldInfo.type === "mixed_text" && (
-						<EditMultiValue
-							setEditMode={setEditMode}
-							fieldValue={fieldValue}
-							field={field}
-							inputValue={inputValue}
-							removeItem={removeItem}
-							handleChange={handleChange}
-							handleKeyDown={handleKeyDown}
-						/>
-					)
 				)}
 			</>
 		) : (
@@ -193,52 +181,6 @@ const EditMultiSelect = ({
 	);
 };
 
-// Renders editable field input for multiple values
-const EditMultiValue = ({
-	setEditMode,
-	inputValue,
-	removeItem,
-	handleChange,
-	handleKeyDown,
-	field,
-	fieldValue,
-}: {
-	setEditMode: (e: boolean) => void
-	inputValue: HTMLInputElement["value"]
-	removeItem: (key: number) => void
-	handleChange: (event: React.ChangeEvent<HTMLInputElement>) => void
-	handleKeyDown: (event: React.KeyboardEvent) => void
-	field: FieldProps["field"]
-	fieldValue: FieldInputProps<unknown>["value"]
-}) => {
-	const { t } = useTranslation();
-
-	return (
-		<>
-			<div onBlur={() => setEditMode(false)} ref={childRef}>
-				<input
-					type="text"
-					name={field.name}
-					onKeyDown={(e) => handleKeyDown(e)}
-					onChange={(e) => handleChange(e)}
-					value={inputValue}
-					placeholder={t("EDITABLE.MULTI.PLACEHOLDER")}
-				/>
-			</div>
-			{fieldValue instanceof Array &&
-				fieldValue.length !== 0 &&
-				fieldValue.map((item, key) => (
-					<span className="ng-multi-value" key={key}>
-						{item}
-						<button className="button-like-anchor" onClick={() => removeItem(key)}>
-							<i className="fa fa-times" />
-						</button>
-					</span>
-				))}
-		</>
-	);
-};
-
 // Shows the values of the array in non-edit mode
 const ShowValue = ({
 	setEditMode,