Fix interactive dialogs not showing (#8427)

* Fix interactive dialogs not showing

* Use conditionals

app/components/settings/bool_setting.tsx

@@ -12,7 +12,7 @@ import Label from './label';
 
 type Props = {
     label?: string;
-    value: boolean;
+    value?: boolean;
     placeholder?: string;
     helpText?: string;
     errorText?: string;

app/components/settings/radio_setting/index.tsx

@@ -30,7 +30,7 @@ type Props = {
     onChange: (value: string) => void;
     helpText?: string;
     errorText?: string;
-    value: string;
+    value?: string;
     testID: string;
 }
 function RadioSetting({

app/components/settings/text_setting.tsx

@@ -55,7 +55,7 @@ type Props = {
     maxLength?: number;
     optional: boolean;
     onChange: (value: string) => void;
-    value: string;
+    value?: string;
     multiline: boolean;
     keyboardType: KeyboardTypeOptions;
     secureTextEntry: boolean;

app/screens/interactive_dialog/dialog_element.tsx

@@ -22,6 +22,21 @@ function selectKeyboardType(type: InteractiveDialogElementType, subtype?: Intera
     return selectKB(subtype);
 }
 
+function getStringValue(value: string | number | boolean | string[] | undefined): string | undefined {
+    if (typeof value === 'string') {
+        return value;
+    }
+    if (typeof value === 'number') {
+        return value.toString();
+    }
+
+    return undefined;
+}
+
+function getBooleanValue(value: string | number | boolean | string[] | undefined): boolean | undefined {
+    return typeof value === 'boolean' ? value : undefined;
+}
+
 type Props = {
     displayName: string;
     name: string;
@@ -34,7 +49,7 @@ type Props = {
     dataSource?: string;
     optional?: boolean;
     options?: PostActionOption[];
-    value: string|number|boolean|string[];
+    value?: string|number|boolean|string[];
     onChange: (name: string, value: string|number|boolean|string[]) => void;
 }
 function DialogElement({
@@ -59,7 +74,7 @@ function DialogElement({
             return;
         }
         onChange(name, newValue);
-    }, [onChange, type, subtype]);
+    }, [type, subtype, onChange, name]);
 
     const handleSelect = useCallback((newValue: DialogOption | undefined) => {
         if (!newValue) {
@@ -68,7 +83,7 @@ function DialogElement({
         }
 
         onChange(name, newValue.value);
-    }, [onChange]);
+    }, [name, onChange]);
 
     switch (type) {
         case 'text':
@@ -77,7 +92,7 @@ function DialogElement({
                 <TextSetting
                     label={displayName}
                     maxLength={maxLength || (type === 'text' ? TEXT_DEFAULT_MAX_LENGTH : TEXTAREA_DEFAULT_MAX_LENGTH)}
-                    value={value as string}
+                    value={getStringValue(value)}
                     placeholder={placeholder}
                     helpText={helpText}
                     errorText={errorText}
@@ -102,7 +117,7 @@ function DialogElement({
                     errorText={errorText}
                     placeholder={placeholder}
                     showRequiredAsterisk={true}
-                    selected={value as string}
+                    selected={getStringValue(value)}
                     roundedBorders={false}
                     testID={testID}
                 />
@@ -116,14 +131,14 @@ function DialogElement({
                     options={options}
                     onChange={handleChange}
                     testID={testID}
-                    value={value as string}
+                    value={getStringValue(value)}
                 />
             );
         case 'bool':
             return (
                 <BoolSetting
                     label={displayName}
-                    value={value as boolean}
+                    value={getBooleanValue(value)}
                     placeholder={placeholder}
                     helpText={helpText}
                     errorText={errorText}

app/screens/interactive_dialog/index.tsx

@@ -123,7 +123,7 @@ function InteractiveDialog({
         base.showAsAction = 'always';
         base.color = theme.sidebarHeaderTextColor;
         return base;
-    }, [intl, submitting, theme]);
+    }, [intl, submitLabel, submitting, theme.sidebarHeaderTextColor]);
 
     useEffect(() => {
         setButtons(componentId, {
@@ -190,7 +190,7 @@ function InteractiveDialog({
         } else {
             close();
         }
-    }, [elements, values, intl, url, callbackId, state]);
+    }, [elements, url, callbackId, state, values, serverUrl, intl]);
 
     useEffect(() => {
         const unsubscribe = Navigation.events().registerComponentListener({
@@ -219,7 +219,7 @@ function InteractiveDialog({
         return () => {
             unsubscribe.remove();
         };
-    }, [serverUrl, url, callbackId, state, handleSubmit, submitting]);
+    }, [serverUrl, url, callbackId, state, handleSubmit, submitting, componentId, notifyOnCancel]);
 
     useAndroidHardwareBackHandler(componentId, close);
 
@@ -246,9 +246,6 @@ function InteractiveDialog({
                 }
                 {Boolean(elements) && elements.map((e) => {
                     const value = secureGetFromRecord(values, e.name);
-                    if (value === undefined) {
-                        return null;
-                    }
                     return (
                         <DialogElement
                             key={'dialogelement' + e.name}