Skip to content

Commit 895ebf0

Browse files
OtavioStasiakOtavioStasiak
authored
fix: Text input fields on ModalBlockView fail to accept user input (#6980)
* fix: input saving the text typed and breaking the app on add a new option * feat: add storybook * chore: code improvements * code improvements * code improvements * fix: test update * chore: code improvements
1 parent ae5e663 commit 895ebf0

4 files changed

Lines changed: 351 additions & 25 deletions

File tree

‎app/containers/UIKit/MessageBlock.tsx‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,10 @@ export const messageBlockWithContext = (context: any) => (props: any) =>
1212

1313
const MessageBlock = ({ blocks }: any) => UiKitMessage(blocks);
1414

15-
export const modalBlockWithContext = (context: any) => (data: any) =>
16-
(
17-
<KitContext.Provider value={{ ...context, ...data }}>
18-
<ModalBlock {...data} />
19-
</KitContext.Provider>
20-
);
15+
export const ModalBlockWithContext = (props: any) => (
16+
<KitContext.Provider value={props}>
17+
<ModalBlock {...props} />
18+
</KitContext.Provider>
19+
);
2120

2221
const ModalBlock = ({ blocks }: any) => UiKitModal(blocks);

‎app/containers/UIKit/UiKitModal.stories.tsx‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
import React, { useState } from 'react';
2+
import { Button, View } from 'react-native';
3+
14
import { UiKitComponent, UiKitModal } from '.';
25
import { KitContext, defaultContext } from './utils';
36
import MessageContext from '../message/Context';
@@ -759,3 +762,53 @@ export const ModalDatePickerWithError = () => (
759762
</KitContext.Provider>
760763
);
761764
ModalDatePickerWithError.storyName = 'Modal - DatePicker with error';
765+
766+
const initialInputBlocks = [
767+
{
768+
type: 'input',
769+
element: { type: 'plain_text_input', actionId: 'input-1' },
770+
label: { type: 'plain_text', text: 'First field', emoji: true },
771+
placeholder: { type: 'plain_text', text: 'Type here…', emoji: true }
772+
},
773+
{
774+
type: 'input',
775+
element: { type: 'plain_text_input', actionId: 'input-2' },
776+
label: { type: 'plain_text', text: 'Second field', emoji: true },
777+
placeholder: { type: 'plain_text', text: 'Type here…', emoji: true }
778+
}
779+
];
780+
781+
export const ModalInputWithAddField = () => {
782+
const [values, setValues] = useState<Record<string, { blockId: string; value: string }>>({});
783+
const [blocks, setBlocks] = useState(initialInputBlocks);
784+
const changeState = ({ actionId, value, blockId = 'default' }: { actionId: string; value: string; blockId?: string }) => {
785+
setValues(prev => ({ ...prev, [actionId]: { blockId, value } }));
786+
};
787+
const addField = () => {
788+
const nextId = `input-${blocks.length + 1}`;
789+
setBlocks(prev => [
790+
...prev,
791+
{
792+
type: 'input',
793+
element: { type: 'plain_text_input', actionId: nextId },
794+
label: { type: 'plain_text', text: `Field ${blocks.length + 1}`, emoji: true },
795+
placeholder: { type: 'plain_text', text: 'Type here…', emoji: true }
796+
}
797+
]);
798+
};
799+
const modalKey = `${blocks.length}-${blocks
800+
.map((b: any, index: number) => `${b.element?.actionId || b.type}-${index}`)
801+
.join('-')}`;
802+
803+
return (
804+
<View>
805+
<React.Fragment key={modalKey}>
806+
<KitContext.Provider value={{ ...defaultContext, state: changeState, values }}>
807+
<UiKitComponent render={UiKitModal} blocks={blocks} />
808+
</KitContext.Provider>
809+
</React.Fragment>
810+
<Button title='Add field' onPress={addField} />
811+
</View>
812+
);
813+
};
814+
ModalInputWithAddField.storyName = 'Modal - Input with add field';

‎app/containers/UIKit/__snapshots__/UiKitModal.test.tsx.snap‎

Lines changed: 275 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3087,6 +3087,277 @@ exports[`Story Snapshots: ModalFormTextArea should match snapshot 1`] = `
30873087
]
30883088
`;
30893089

3090+
exports[`Story Snapshots: ModalInputWithAddField should match snapshot 1`] = `
3091+
<View>
3092+
<View
3093+
style={
3094+
{
3095+
"marginBottom": 16,
3096+
}
3097+
}
3098+
>
3099+
<Text
3100+
style={
3101+
[
3102+
{
3103+
"backgroundColor": "transparent",
3104+
"fontFamily": "Inter",
3105+
"fontSize": 14,
3106+
"fontWeight": "600",
3107+
"marginVertical": 10,
3108+
"textAlign": "left",
3109+
},
3110+
{
3111+
"color": "#1F2329",
3112+
},
3113+
]
3114+
}
3115+
>
3116+
First field
3117+
</Text>
3118+
<A11yOrderView
3119+
orderKey=":r5:"
3120+
>
3121+
<A11yIndexView
3122+
importantForAccessibility="yes"
3123+
orderFocusType={0}
3124+
orderIndex={1}
3125+
orderKey=":r5:"
3126+
>
3127+
<View
3128+
style={
3129+
[
3130+
{
3131+
"gap": 4,
3132+
"marginBottom": 10,
3133+
},
3134+
{
3135+
"marginBottom": 0,
3136+
},
3137+
]
3138+
}
3139+
>
3140+
<View
3141+
accessible={false}
3142+
style={
3143+
{
3144+
"justifyContent": "center",
3145+
"position": "relative",
3146+
}
3147+
}
3148+
>
3149+
<TextInput
3150+
accessibilityLabel=""
3151+
accessible={true}
3152+
autoCapitalize="none"
3153+
autoCorrect={false}
3154+
keyboardAppearance="light"
3155+
onChangeText={[Function]}
3156+
placeholderTextColor="#9EA2A8"
3157+
style={
3158+
[
3159+
{
3160+
"color": "#1F2329",
3161+
},
3162+
[
3163+
{
3164+
"backgroundColor": "transparent",
3165+
"borderRadius": 4,
3166+
"borderWidth": 1,
3167+
"fontFamily": "Inter",
3168+
"fontSize": 16,
3169+
"fontWeight": "400",
3170+
"paddingHorizontal": 16,
3171+
"paddingVertical": 14,
3172+
"textAlign": "left",
3173+
},
3174+
undefined,
3175+
{},
3176+
{
3177+
"backgroundColor": "#FFFFFF",
3178+
"borderColor": "#9EA2A8",
3179+
"color": "#1F2329",
3180+
},
3181+
{},
3182+
undefined,
3183+
],
3184+
{
3185+
"textAlign": "auto",
3186+
},
3187+
]
3188+
}
3189+
underlineColorAndroid="transparent"
3190+
/>
3191+
</View>
3192+
</View>
3193+
</A11yIndexView>
3194+
</A11yOrderView>
3195+
</View>
3196+
<View
3197+
style={
3198+
{
3199+
"marginBottom": 16,
3200+
}
3201+
}
3202+
>
3203+
<Text
3204+
style={
3205+
[
3206+
{
3207+
"backgroundColor": "transparent",
3208+
"fontFamily": "Inter",
3209+
"fontSize": 14,
3210+
"fontWeight": "600",
3211+
"marginVertical": 10,
3212+
"textAlign": "left",
3213+
},
3214+
{
3215+
"color": "#1F2329",
3216+
},
3217+
]
3218+
}
3219+
>
3220+
Second field
3221+
</Text>
3222+
<A11yOrderView
3223+
orderKey=":r6:"
3224+
>
3225+
<A11yIndexView
3226+
importantForAccessibility="yes"
3227+
orderFocusType={0}
3228+
orderIndex={1}
3229+
orderKey=":r6:"
3230+
>
3231+
<View
3232+
style={
3233+
[
3234+
{
3235+
"gap": 4,
3236+
"marginBottom": 10,
3237+
},
3238+
{
3239+
"marginBottom": 0,
3240+
},
3241+
]
3242+
}
3243+
>
3244+
<View
3245+
accessible={false}
3246+
style={
3247+
{
3248+
"justifyContent": "center",
3249+
"position": "relative",
3250+
}
3251+
}
3252+
>
3253+
<TextInput
3254+
accessibilityLabel=""
3255+
accessible={true}
3256+
autoCapitalize="none"
3257+
autoCorrect={false}
3258+
keyboardAppearance="light"
3259+
onChangeText={[Function]}
3260+
placeholderTextColor="#9EA2A8"
3261+
style={
3262+
[
3263+
{
3264+
"color": "#1F2329",
3265+
},
3266+
[
3267+
{
3268+
"backgroundColor": "transparent",
3269+
"borderRadius": 4,
3270+
"borderWidth": 1,
3271+
"fontFamily": "Inter",
3272+
"fontSize": 16,
3273+
"fontWeight": "400",
3274+
"paddingHorizontal": 16,
3275+
"paddingVertical": 14,
3276+
"textAlign": "left",
3277+
},
3278+
undefined,
3279+
{},
3280+
{
3281+
"backgroundColor": "#FFFFFF",
3282+
"borderColor": "#9EA2A8",
3283+
"color": "#1F2329",
3284+
},
3285+
{},
3286+
undefined,
3287+
],
3288+
{
3289+
"textAlign": "auto",
3290+
},
3291+
]
3292+
}
3293+
underlineColorAndroid="transparent"
3294+
/>
3295+
</View>
3296+
</View>
3297+
</A11yIndexView>
3298+
</A11yOrderView>
3299+
</View>
3300+
<View
3301+
accessibilityRole="button"
3302+
accessibilityState={
3303+
{
3304+
"busy": undefined,
3305+
"checked": undefined,
3306+
"disabled": undefined,
3307+
"expanded": undefined,
3308+
"selected": undefined,
3309+
}
3310+
}
3311+
accessibilityValue={
3312+
{
3313+
"max": undefined,
3314+
"min": undefined,
3315+
"now": undefined,
3316+
"text": undefined,
3317+
}
3318+
}
3319+
accessible={true}
3320+
collapsable={false}
3321+
focusable={true}
3322+
onClick={[Function]}
3323+
onResponderGrant={[Function]}
3324+
onResponderMove={[Function]}
3325+
onResponderRelease={[Function]}
3326+
onResponderTerminate={[Function]}
3327+
onResponderTerminationRequest={[Function]}
3328+
onStartShouldSetResponder={[Function]}
3329+
style={
3330+
{
3331+
"opacity": 1,
3332+
}
3333+
}
3334+
>
3335+
<View
3336+
style={
3337+
[
3338+
{},
3339+
]
3340+
}
3341+
>
3342+
<Text
3343+
style={
3344+
[
3345+
{
3346+
"color": "#007AFF",
3347+
"fontSize": 18,
3348+
"margin": 8,
3349+
"textAlign": "center",
3350+
},
3351+
]
3352+
}
3353+
>
3354+
Add field
3355+
</Text>
3356+
</View>
3357+
</View>
3358+
</View>
3359+
`;
3360+
30903361
exports[`Story Snapshots: ModalInputWithError should match snapshot 1`] = `
30913362
<View
30923363
style={
@@ -3115,13 +3386,13 @@ exports[`Story Snapshots: ModalInputWithError should match snapshot 1`] = `
31153386
Label
31163387
</Text>
31173388
<A11yOrderView
3118-
orderKey=":r5:"
3389+
orderKey=":r7:"
31193390
>
31203391
<A11yIndexView
31213392
importantForAccessibility="yes"
31223393
orderFocusType={0}
31233394
orderIndex={1}
3124-
orderKey=":r5:"
3395+
orderKey=":r7:"
31253396
>
31263397
<View
31273398
style={
@@ -3633,13 +3904,13 @@ exports[`Story Snapshots: ModalMultilneWithError should match snapshot 1`] = `
36333904
Label
36343905
</Text>
36353906
<A11yOrderView
3636-
orderKey=":r6:"
3907+
orderKey=":r8:"
36373908
>
36383909
<A11yIndexView
36393910
importantForAccessibility="yes"
36403911
orderFocusType={0}
36413912
orderIndex={1}
3642-
orderKey=":r6:"
3913+
orderKey=":r8:"
36433914
>
36443915
<View
36453916
style={

0 commit comments

Comments
 (0)