I have a Formik form where I take user input input & run a query after submitting. When the query returns some data, I render a list accordingly.
When I see the list, the keyboard is not hidden automatically.
I added Keyboard.dismiss() to my handleSubmit. However, this causes the formik error to show up immediately after the form is submitted and data is returned/rendered. For instance, the error suggests that the input field should not be empty. The error should only show up when we are trying to resubmit the form without an input. Right now, only the list should be rendered. Why is the keyboard interfering in this?
export const AddFriendScreen: React.FunctionComponent = () => { const initialValues: FormValues = { input: '', }; const [showFlatList, setShowFlatList] = useState<UsersLazyQueryHookResult>('', ); const [loadUsers, { data }] = useUsersLazyQuery({ onCompleted: () => { setShowFlatList(data); Keyboard.dismiss(); }, }); const handleSubmitForm = ( values: FormValues, helpers: FormikHelpers<FormValues>, ) => { loadUsers({ variables: { where: { OR: [ { phoneNumber: newPhoneNumber },], }, }, }); helpers.resetForm(); }; return (<SafeAreaView style={styles.safeAreaViewContainer}><View style={styles.searchTopContainer}><View style={styles.formContainer}><Formik initialValues={initialValues} onSubmit={handleSubmitForm} validationSchema={validationSchema}> {({ handleChange, handleBlur, handleSubmit, values }) => (<View style={styles.searchFieldContainer}><View style={styles.form}><FieldInput handleChange={handleChange} handleBlur={handleBlur} value={values.input} fieldType="input" icon="user" placeholderText="E-Mail oder Telefonnummer oder Name" /><ErrorMessage name="input" render={(msg) => <ErrorText errorMessage={msg} />} /></View><View style={styles.buttonContainer}><ActionButton buttonText="Suchen" onPress={handleSubmit} /></View></View> )}</Formik></View><View style={styles.listHolder}> {data && showFlatList !== null && (<UsersFoundList data={data}/> )}</View></View></SafeAreaView> );};Snack Expo: