Fix interactive dialog number handling (#8431) (#8432)

(cherry picked from commit 32453b3) Co-authored-by: Daniel Espino García <[email protected]>
mattermost · Dec 19, 2024 · aa07f43 · aa07f43
1 parent 3268684
commit aa07f43
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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',