regression: the value of the uikit's block uikit could be undefined (#5195)

* regression: the value of the uikit's block uikit could be undefined

* update the test and add regression test

* update tests

---------

Co-authored-by: Gleidson Daniel Silva <gleidson10daniel@hotmail.com>

__tests__/containers/UIKit/__snapshots__/UiKitModal.stories.storyshot

@@ -14,6 +14,8 @@ exports[`Storyshots UIKit/UiKitModal Modal - Images 1`] = `"{\\"type\\":\\"RCTSc
 
 exports[`Storyshots UIKit/UiKitModal Modal - Input with error 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"},{\\"paddingHorizontal\\":16}],\\"keyboardShouldPersistTaps\\":\\"always\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":null}]}"`;
 
+exports[`Storyshots UIKit/UiKitModal Modal - Multi Select Input 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"},{\\"paddingHorizontal\\":16}],\\"keyboardShouldPersistTaps\\":\\"always\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":null}]}"`;
+
 exports[`Storyshots UIKit/UiKitModal Modal - Multilne with error 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"},{\\"paddingHorizontal\\":16}],\\"keyboardShouldPersistTaps\\":\\"always\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":null}]}"`;
 
 exports[`Storyshots UIKit/UiKitModal Modal - Section and Accessories 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"backgroundColor\\":\\"#fff\\"},{\\"paddingHorizontal\\":16}],\\"keyboardShouldPersistTaps\\":\\"always\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":null}]}"`;

app/containers/UIKit/UiKitMessage.stories.tsx

@@ -252,6 +252,47 @@ export const SectionMultiSelect = () =>
 					emoji: true
 				}
 			}
+		},
+		{
+			type: 'section',
+			text: {
+				type: 'mrkdwn',
+				text: 'Section + select with value undefined'
+			},
+			accessory: {
+				type: 'multi_static_select',
+				appId: 'app-id',
+				blockId: 'block-id',
+				actionId: 'action-id',
+				initialValue: undefined,
+				options: [
+					{
+						value: 'option_1',
+						text: {
+							type: 'plain_text',
+							text: 'lorem ipsum 🚀',
+							emoji: true
+						}
+					},
+					{
+						value: 'option_2',
+						text: {
+							type: 'plain_text',
+							text: 'lorem ipsum 🚀',
+							emoji: true
+						}
+					}
+				],
+				placeholder: {
+					type: 'plain_text',
+					text: 'Select an item'
+				},
+				label: {
+					type: 'plain_text',
+					text: 'Label',
+					emoji: true
+				}
+			}
 		}
 	]);
 SectionMultiSelect.storyName = 'Section + Multi Select';

app/containers/UIKit/UiKitModal.stories.tsx

@@ -174,7 +174,12 @@ export const ModalFormInput = () =>
 				text: 'Set a date',
 				emoji: true
 			}
-		},
+		}
+	]);
+ModalFormInput.storyName = 'Modal - Form Input';
+
+export const ModalMultiSelect = () =>
+	UiKitModal([
 		{
 			type: 'input',
 			element: {
@@ -200,10 +205,48 @@ export const ModalFormInput = () =>
 				type: 'plain_text',
 				text: 'Share with...',
 				emoji: true
+			},
+			hint: {
+				type: 'plain_text',
+				text: 'Initial Value Undefined',
+				emoji: true
+			}
+		},
+		{
+			type: 'input',
+			element: {
+				type: 'multi_static_select',
+				initialValue: [1],
+				options: [
+					{
+						text: {
+							type: 'plain_text',
+							text: 'John'
+						},
+						value: 1
+					},
+					{
+						text: {
+							type: 'plain_text',
+							text: 'Dog'
+						},
+						value: 2
+					}
+				]
+			},
+			label: {
+				type: 'plain_text',
+				text: 'Share with...',
+				emoji: true
+			},
+			hint: {
+				type: 'plain_text',
+				text: 'Initial Value as John',
+				emoji: true
 			}
 		}
 	]);
-ModalFormInput.storyName = 'Modal - Form Input';
+ModalMultiSelect.storyName = 'Modal - Multi Select Input';
 
 export const ModalFormTextArea = () =>
 	UiKitModal([

app/containers/UIKit/index.tsx

@@ -138,7 +138,7 @@ class MessageParser extends UiKitParserMessage<React.ReactElement> {
 
 	multiStaticSelect(element: IElement, context: BlockContext) {
 		const [{ loading, value }, action] = useBlockContext(element, context);
-		const valueFiltered = element.options?.filter(option => value.includes(option.value));
+		const valueFiltered = element?.options?.filter(option => value?.includes(option.value));
 		return <MultiSelect {...element} value={valueFiltered} onChange={action} context={context} loading={loading} multiselect />;
 	}