diff --git a/packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/input/components/ArrayFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/input/components/ArrayFieldInput.tsx index 7a5696edeb..d7b15d35ec 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/input/components/ArrayFieldInput.tsx +++ b/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[]) => { diff --git a/packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/input/components/MultiItemFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/input/components/MultiItemFieldInput.tsx index ce7e5a1243..9f757e9021 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/input/components/MultiItemFieldInput.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/input/components/MultiItemFieldInput.tsx @@ -87,6 +87,12 @@ export const MultiItemFieldInput = ({ ) { return; } + const { isValid } = validateInputAndComputeUpdatedItems(); + + if (!isValid && isInputDisplayed) { + return; + } + handleSubmitChanges(); onClickOutside(items, event); }, @@ -172,21 +178,34 @@ export const MultiItemFieldInput = ({ 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 = ({ : (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 = ({ 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 = ({ ? handleInputChange(turnIntoEmptyStringIfWhitespacesOnly(value)) : handleInputChange(''); }} - onEnter={() => { - handleSubmitChanges(); - if (shouldAutoEnterBecauseOnlyOneItemIsAllowed) { - handleAutoEnter(); - } - }} + onEnter={handleEnter} hasItem={!!items.length} rightComponent={ items.length ? ( { - handleSubmitChanges(); - if (shouldAutoEnterBecauseOnlyOneItemIsAllowed) { - handleAutoEnter(); - } - }} + onClick={handleEnter} /> ) : null }