question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

TextInput: Using error prop function with placeholder prop set makes name overlap with placeholder

See original GitHub issue

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.

TextInput-Error-Styles

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:closed
  • Created 3 years ago
  • Reactions:2
  • Comments:7 (5 by maintainers)

github_iconTop GitHub Comments

2reactions
jbindacommented, Jul 8, 2020

closed via #2032

2reactions
BatDroidcommented, Jun 30, 2020

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?

Read more comments on GitHub >

github_iconTop 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 >
TextInput - Mantine
Capture string input from user.
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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found