React-native-paper: TextInput: Using error prop function with placeholder prop set makes name overlap with placeholder

[victorbutler]

Environment

react: 16.11.0
react-native: 0.62.2
react-native-paper: 3.10.1

Description

When TextInput is used with a dynamic error prop value, the error styles become red like expected, but the placeholder is also shown at the same time. When I set the error prop error={true} that field renders correctly.

Reproducible Demo

import React, {useState} from 'react';
import {SafeAreaView, StyleSheet, ScrollView, View, Text} from 'react-native';
import {Button, TextInput} from 'react-native-paper';

const TestScreen: () => React$Node = ({navigation}) => {
  const [getEmail, setEmail] = useState('');
  const [hasEmailErrors, setEmailErrors] = useState(false);
  return (
    <SafeAreaView>
      <ScrollView contentInsetAdjustmentBehavior="automatic">
        <View style={styles.halfContainer}>
          <Text>Test TextInput error styles with placeholder set</Text>
          <TextInput
            style={styles.textInput}
            label="Email"
            mode="outlined"
            value={getEmail}
            onChangeText={(email) => setEmail(email)}
            textContentType="username"
            returnKeyType="next"
            keyboardType="email-address"
            autoCapitalize="none"
            error={hasEmailErrors}
            placeholder="[email protected]"
          />
        </View>
        <Button onPress={() => setEmailErrors(!hasEmailErrors)}>
          Toggle Error Styles
        </Button>
      </ScrollView>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  halfContainer: {
    flex: 1,
    padding: 8,
  },
  headline: {
    textAlign: 'center',
  },
  textInput: {
    paddingVertical: 5,
  },
});

export default TestScreen;

Just a note of thanks and gratitude for all the work that goes into this beautiful and easy to use framework. Thank you!

[marchenk0va]

Hi @victorbutler,
Error prop pops up 'on the go', e.g. text validation. In your case we are manually toggling empty inputs, which are correct by default. It's an unexpected behaviour for an error prop. But your observation is a nice opportunity for contribution!

[Taym95]

Hi, I don't think we should close this issue, right?

[marchenk0va]

Hi, I don't think we should close this issue, right?

Yeap, sorry

[bboure]

I am experiencing the same issue.
The reason seems to be this line.

It seems to be on purpose, but why?
In fact, the only use case where this happens is with required fields that are left empty, because the label stays in the field.
If the field is populated, the label goes to the top of the field and the placeholder goes way.

So, here we have two options:

1) we leave the placeholder but the label must also move to the top using minimizeLabel()

2) stop showing the placeholder.

Not sure from the MD specs which one is better.

Maybe 1) is intended here? If the field is required, but empty, showing the placeholder can give the user a clue of what to enter?

[BatDroid]

as @bboure explained the problem is with that line. I changed it to to hidePlaceholder and everything seems to be fine now. Shall I create a pr for it now?

[Taym95]

Go ahead @BatDroid!

[jbinda]

closed via #2032