I have a formik form where I take an input and run a graphql query on submitting the form. If the query returns some data, I render a list to show the items returned. However, when I see the list, the keyboard is not hidden automatically.
Hence, I added Keyboard.dismiss()
to the onCompleted
of my query. 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 the form is re-submitted 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> );};