Friday, 4 September 2020

touched property not being reset

I have a Formik form where I take user input input & run a query after submitting.

When I click on the search button, a list is rendered. All list items have a button of their own. When I click on the green add button (from the list items) for the first time, the button does not work. Console log's content is not printed. Instead, the onBlur event of the inputField is triggered. However, if I click on the + button again, then it works and prints no. This problem is visible in simulators/phones, not on the web mode on the sandbox.

export const AddFriendScreen: React.FunctionComponent = () => {
  const initialValues: FormValues = {
    input: '',
  };

  const [showFlatList, setShowFlatList] = useState<UsersLazyQueryHookResult>(
    '',
  );


  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:

https://snack.expo.io/@nhammad/jealous-beef-jerky

[![enter image description here][1]][1]

Edit:

Found a workaround but still open to easier solutions. Still haven't figured out what's causing the issue exactly.



from touched property not being reset

No comments:

Post a Comment