I have a TextInput and when I autofill my email address I have a space after my email.

I try this

 const email = values.email.trim();

and also

 const email = values.email.replace(/\s+/g, ' ');

but it's doesn't work. Someone know how to remove the space after the autofill?

    return (
      <Formik
        enableReinitialize={true}
        initialValues={{ email: this.props.navigation.getParam("email") }}
        validationSchema={yup.object().shape({
          email: yup
            .string()
        })}
        onSubmit={async (values) => {
          const email = values.email;
        }
      }
      >
        {({ handleChange, handleSubmit, values, errors, touched, setFieldTouched }) => (
          <View>
          {
            <View>
              <TextInput
                value={values.email}
                placeholder="Email"
                autoCapitalize="none"
                autoCorrect={false}
                onBlur={() => setFieldTouched("email")}
                onChangeText={handleChange("email")}
                autoCompleteType={"email"}
              />
              <View>
                <TouchableOpacity
                  onPress={handleSubmit}
                >
                  <Text style={styles.textButton}>Valider</Text>
                </TouchableOpacity>
              </View>
            </View>
        )}
      </Formik>
    );

I have a TextInput and when I autofill my email address I have a space after my email.

I try this

 const email = values.email.trim();

and also

 const email = values.email.replace(/\s+/g, ' ');

but it's doesn't work. Someone know how to remove the space after the autofill?

    return (
      <Formik
        enableReinitialize={true}
        initialValues={{ email: this.props.navigation.getParam("email") }}
        validationSchema={yup.object().shape({
          email: yup
            .string()
        })}
        onSubmit={async (values) => {
          const email = values.email;
        }
      }
      >
        {({ handleChange, handleSubmit, values, errors, touched, setFieldTouched }) => (
          <View>
          {
            <View>
              <TextInput
                value={values.email}
                placeholder="Email"
                autoCapitalize="none"
                autoCorrect={false}
                onBlur={() => setFieldTouched("email")}
                onChangeText={handleChange("email")}
                autoCompleteType={"email"}
              />
              <View>
                <TouchableOpacity
                  onPress={handleSubmit}
                >
                  <Text style={styles.textButton}>Valider</Text>
                </TouchableOpacity>
              </View>
            </View>
        )}
      </Formik>
    );

• javascript
• react-native

• can you please show your values object. – deathstroke Commented Aug 22, 2019 at 10:17
• I update my question – askemeline Commented Aug 22, 2019 at 10:30
• I'm still not able to see values object and i believe there's something wrong with it. Please have a look at the doc example of TextInput. It works fine with autofil. If still facing the issue please show more code – deathstroke Commented Aug 22, 2019 at 10:34

2 Answers 2

If you haven't found a solution for this situation yet, here's one way that solves it:

onChangeText={(val) => setFieldValue('login', val.trim())}

Instead of using handleChanges, you can use setFieldValue, then "trim" val.

<Text
...
value={this.state.emailID}
/>

Reuse your trim logic and assign the new value to the state variable(emailID) in "onChangeText" of the textinput