Follow up on FieldInput fix (#16611)

Follow up on https://github.com/twentyhq/twenty/pull/16603

packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/input/components/ArrayFieldInput.tsx

@@ -22,12 +22,13 @@ export const ArrayFieldInput = () => {
   );
   const parseStringArrayToArrayValue = (arrayItems: string[]) => {
     const parseResponse = arraySchema.safeParse(arrayItems);
+
     if (parseResponse.success) {
       return parseResponse.data;
     }
   };
 
-  const handleChange = (newValue: any[]) => {
+  const handleChange = (newValue: string[]) => {
     if (!isDefined(newValue)) setDraftValue(null);
 
     const nextValue = parseStringArrayToArrayValue(newValue);
@@ -38,10 +39,13 @@ export const ArrayFieldInput = () => {
   };
 
   const handleClickOutside = (
-    _newValue: any,
+    newValue: string[],
     event: MouseEvent | TouchEvent,
   ) => {
-    onClickOutside?.({ newValue: draftValue, event });
+    onClickOutside?.({
+      newValue: parseStringArrayToArrayValue(newValue),
+      event,
+    });
   };
 
   const handleEscape = (newValue: string[]) => {

packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/input/components/MultiItemFieldInput.tsx

@@ -87,6 +87,12 @@ export const MultiItemFieldInput = <T,>({
       ) {
         return;
       }
+      const { isValid } = validateInputAndComputeUpdatedItems();
+
+      if (!isValid && isInputDisplayed) {
+        return;
+      }
+
       handleSubmitChanges();
       onClickOutside(items, event);
     },
@@ -172,21 +178,34 @@ export const MultiItemFieldInput = <T,>({
     setIsInputDisplayed(true);
   };
 
-  const handleAutoEnter = () => {
-    const sanitizedInput = inputValue.trim();
+  const handleEnter = () => {
+    const { isValid, updatedItems } = validateInputAndComputeUpdatedItems();
+    if (!isValid) {
+      return;
+    }
 
-    const newItem = formatInput
-      ? formatInput(sanitizedInput)
-      : (sanitizedInput as unknown as T);
-
-    const updatedItems = isAddingNewItem
-      ? [...items, newItem]
-      : toSpliced(items, itemToEditIndex, 1, newItem);
-
-    onEnter(updatedItems);
+    handleSubmitChanges();
+    if (shouldAutoEnterBecauseOnlyOneItemIsAllowed) {
+      onEnter(updatedItems);
+    }
+    setIsInputDisplayed(false);
+    setIsAddingNewItem(false);
+    setInputValue('');
   };
 
   const handleSubmitChanges = () => {
+    const { isValid, updatedItems } = validateInputAndComputeUpdatedItems();
+    if (!isValid) {
+      return;
+    }
+
+    onChange(updatedItems);
+  };
+
+  const validateInputAndComputeUpdatedItems = (): {
+    isValid: boolean;
+    updatedItems: T[];
+  } => {
     const sanitizedInput = inputValue.trim();
 
     const newItem = formatInput
@@ -194,17 +213,22 @@ export const MultiItemFieldInput = <T,>({
       : (sanitizedInput as unknown as T);
 
     if (sanitizedInput === '' && isAddingNewItem) {
-      return;
+      return { isValid: true, updatedItems: items };
     }
 
     if (sanitizedInput === '' && shouldAutoEnterBecauseOnlyOneItemIsAllowed) {
-      onEnter([newItem]);
-      return;
+      return {
+        isValid: true,
+        updatedItems: [],
+      };
     }
 
     if (sanitizedInput === '' && !isAddingNewItem) {
       handleDeleteItem(itemToEditIndex);
-      return;
+      return {
+        isValid: true,
+        updatedItems: toSpliced(items, itemToEditIndex, 1),
+      };
     }
 
     if (validateInput !== undefined) {
@@ -212,17 +236,16 @@ export const MultiItemFieldInput = <T,>({
       if (!validationData.isValid) {
         onError?.(true, items);
         setErrorData(validationData);
-        return;
+        return { isValid: false, updatedItems: items };
       }
     }
 
-    const updatedItems = isAddingNewItem
-      ? [...items, newItem]
-      : toSpliced(items, itemToEditIndex, 1, newItem);
-
-    onChange(updatedItems);
-    setIsAddingNewItem(false);
-    setIsInputDisplayed(false);
+    return {
+      isValid: true,
+      updatedItems: isAddingNewItem
+        ? [...items, newItem]
+        : toSpliced(items, itemToEditIndex, 1, newItem),
+    };
   };
 
   const handleSetPrimaryItem = (index: number) => {
@@ -285,23 +308,13 @@ export const MultiItemFieldInput = <T,>({
               ? handleInputChange(turnIntoEmptyStringIfWhitespacesOnly(value))
               : handleInputChange('');
           }}
-          onEnter={() => {
-            handleSubmitChanges();
-            if (shouldAutoEnterBecauseOnlyOneItemIsAllowed) {
-              handleAutoEnter();
-            }
-          }}
+          onEnter={handleEnter}
           hasItem={!!items.length}
           rightComponent={
             items.length ? (
               <LightIconButton
                 Icon={isAddingNewItem ? IconPlus : IconCheck}
-                onClick={() => {
-                  handleSubmitChanges();
-                  if (shouldAutoEnterBecauseOnlyOneItemIsAllowed) {
-                    handleAutoEnter();
-                  }
-                }}
+                onClick={handleEnter}
               />
             ) : null
           }