diff --git a/app/screens/interactive_dialog/dialog_element.tsx b/app/screens/interactive_dialog/dialog_element.tsx index 422adcdb3b..3338b6089c 100644 --- a/app/screens/interactive_dialog/dialog_element.tsx +++ b/app/screens/interactive_dialog/dialog_element.tsx @@ -70,7 +70,8 @@ function DialogElement({ const testID = `InteractiveDialogElement.${name}`; const handleChange = useCallback((newValue: string | boolean | string[]) => { if (type === 'text' && subtype === 'number') { - onChange(name, parseInt(newValue as string, 10)); + const number = parseInt(newValue as string, 10); + onChange(name, isNaN(number) ? '' : number); return; } onChange(name, newValue); diff --git a/app/screens/interactive_dialog/index.tsx b/app/screens/interactive_dialog/index.tsx index cbf54ba867..eaa2042e28 100644 --- a/app/screens/interactive_dialog/index.tsx +++ b/app/screens/interactive_dialog/index.tsx @@ -140,10 +140,16 @@ function InteractiveDialog({ const handleSubmit = useCallback(async () => { const newErrors: Errors = {}; + const submission = {...values}; let hasErrors = false; if (elements) { elements.forEach((elem) => { - const newError = checkDialogElementForError(elem, secureGetFromRecord(values, elem.name)); + // Delete empty number fields before submissions + if (elem.type === 'text' && elem.subtype === 'number' && secureGetFromRecord(submission, elem.name) === '') { + delete submission[elem.name]; + } + + const newError = checkDialogElementForError(elem, secureGetFromRecord(submission, elem.name)); if (newError) { newErrors[elem.name] = intl.formatMessage({id: newError.id, defaultMessage: newError.defaultMessage}, newError.values); hasErrors = true; @@ -161,7 +167,7 @@ function InteractiveDialog({ url, callback_id: callbackId, state, - submission: values, + submission, } as DialogSubmission; setSubmitting(true); diff --git a/app/utils/integrations.ts b/app/utils/integrations.ts index 7fe8092e07..a9cd5b418b 100644 --- a/app/utils/integrations.ts +++ b/app/utils/integrations.ts @@ -10,16 +10,21 @@ type DialogError = { }; export function checkDialogElementForError(elem: DialogElement, value: any): DialogError | undefined | null { - if (!value && !elem.optional) { - return { - id: 'interactive_dialog.error.required', - defaultMessage: 'This field is required.', - }; + const fieldRequiredError = { + id: 'interactive_dialog.error.required', + defaultMessage: 'This field is required.', + }; + + if (typeof value === 'undefined' && !elem.optional) { + return fieldRequiredError; } const type = elem.type; if (type === 'text' || type === 'textarea') { + if (value === '' && !elem.optional) { + return fieldRequiredError; + } if (value && value.length < elem.min_length) { return { id: 'interactive_dialog.error.too_short',