fix: empty composite field input (#8451)

Fixes: #7225

---------

Co-authored-by: bosiraphael <raphael.bosi@gmail.com>

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={
+            items.length ? (
               <LightIconButton
                 Icon={isAddingNewItem ? IconPlus : IconCheck}
                 onClick={handleSubmitInput}
               />
+            ) : null
           }
         />
       ) : (

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`