Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6214

formik error shows up after dismissing keyboard

$
0
0

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>  );};

Viewing all articles
Browse latest Browse all 6214

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>