TextInput: Using error prop function with placeholder prop set makes name overlap with placeholder
See original GitHub issueEnvironment
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="user@example.com"
/>
</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!
Issue Analytics
- State:
- Created 3 years ago
- Reactions:2
- Comments:7 (5 by maintainers)
Top Results From Across the Web
React Material UI Label Overlaps with Text - Stack Overflow
This is due to the undefined state of the value. This workaround works for me as a fallback: value= this.state.name || '';.
Read more >Input - React Native Elements
Inputs allow users to enter text into a UI. They typically appear in forms and dialogs. Input with placeholder Placeholder Input with Label...
Read more >React Text Field component - Material UI - MUI
The multiline prop transforms the text field into a TextareaAutosize element. Unless the rows prop is set, the height of the text field...
Read more >:placeholder-shown - CSS: Cascading Style Sheets | MDN
This example applies special font and border styles when the placeholder is shown. HTML. <input placeholder="Type something here!" ...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
closed via #2032
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?