From 96c86732784bc1b83804ed1f1e02613a90089715 Mon Sep 17 00:00:00 2001
From: Harsh Singh <harshrajeevsingh@gmail.com>
Date: Wed, 20 Nov 2024 20:09:55 +0530
Subject: [PATCH] fix: empty composite field input (#8451)

Fixes: #7225

---------

Co-authored-by: bosiraphael <raphael.bosi@gmail.com>
---
 .../input/components/MultiItemFieldInput.tsx  | 19 ++++++++++++-------
 .../dropdown/components/DropdownMenuInput.tsx |  4 ++++
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiItemFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiItemFieldInput.tsx
index 7f56cdf99..f219f2cdc 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiItemFieldInput.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiItemFieldInput.tsx
@@ -19,9 +19,8 @@ import { toSpliced } from '~/utils/array/toSpliced';
 import { turnIntoEmptyStringIfWhitespacesOnly } from '~/utils/string/turnIntoEmptyStringIfWhitespacesOnly';
 
 const StyledDropdownMenu = styled(DropdownMenu)`
-  margin-left: -1px;
+  margin: -1px;
   position: relative;
-  margin-top: -1px;
 `;
 
 type MultiItemFieldInputProps<T> = {
@@ -65,8 +64,12 @@ export const MultiItemFieldInput = <T,>({
   };
 
   const handleDropdownCloseOutside = (event: MouseEvent | TouchEvent) => {
-    onCancel?.();
     event.stopImmediatePropagation();
+    if (inputValue?.trim().length > 0) {
+      handleSubmitInput();
+    } else {
+      onCancel?.();
+    }
   };
 
   useListenClickOutside({
@@ -202,10 +205,12 @@ export const MultiItemFieldInput = <T,>({
           }
           onEnter={handleSubmitInput}
           rightComponent={
-            <LightIconButton
-              Icon={isAddingNewItem ? IconPlus : IconCheck}
-              onClick={handleSubmitInput}
-            />
+            items.length ? (
+              <LightIconButton
+                Icon={isAddingNewItem ? IconPlus : IconCheck}
+                onClick={handleSubmitInput}
+              />
+            ) : null
           }
         />
       ) : (
diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuInput.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuInput.tsx
index 1378eb460..f59a0aa3a 100644
--- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuInput.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuInput.tsx
@@ -36,6 +36,10 @@ const StyledInputContainer = styled.div`
   box-sizing: border-box;
   position: relative;
   width: 100%;
+
+  &:not(:first-of-type) {
+    padding: ${({ theme }) => theme.spacing(1)};
+  }
 `;
 
 const StyledRightContainer = styled.div`