TextInput's placeholder is not being displayed initially with multiline set to true on iOS
See original GitHub issueCurrent behaviour
On iOS, if multiline is true and label and placeholder both have a value, the placeholder is not displayed when you click on the input field. If you type something in, selected it all, and delete it, then the placeholder is displayed and works as expected. If you enter two lines of text into the text input and then erase them, then you will see the placeholder. See the video for an example of this behavior.
Expected behaviour
The placeholder should show up.
Code sample
<TextInput
label="Label"
placeholder="Placeholder"
multiline
/>
Screenshots (if applicable)
What have you tried
This is still happening even though #1483 was closed.
Your Environment
software | version |
---|---|
ios or android | ios |
react-native | 0.64.3 |
react-native-paper | 4.11.1 |
node | 16 |
npm or yarn | yarn |
expo sdk | 44.0 |
Issue Analytics
- State:
- Created a year ago
- Reactions:1
- Comments:9 (3 by maintainers)
Top Results From Across the Web
Position of placeholder text in (multiline) TextInput for Android ...
On Android, it's putting the placeholder text as centered vertically! I've checked and there are no styles in any parent component that would ......
Read more >TextInput - React Native
Use it with multiline set to true to be able to fill the lines. Type. number. onBlur . Callback that is called when...
Read more >:placeholder-shown - CSS: Cascading Style Sheets | MDN
The :placeholder-shown CSS pseudo-class represents any or element that is currently displaying placeholder text.
Read more >TextInput - ReactXP
This component provides basic text input capabilities. It can be used in one of two modes. In the first mode, the contents of...
Read more >react-native-floating-label-input - npm
multiline, boolean, false, Set this to true to enable multiline support ... countdownLabel, string, undefined, Set the label to be shown ...
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
I will do my best to investigate that issue.
Created a workaround: https://github.com/callstack/react-native-paper/pull/3331