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's placeholder is not being displayed initially with multiline set to true on iOS

See original GitHub issue

Current 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.

image

Expected behaviour

The placeholder should show up.

Code sample

<TextInput
    label="Label"
    placeholder="Placeholder"
    multiline
 />

Screenshots (if applicable)

image

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:closed
  • Created a year ago
  • Reactions:1
  • Comments:9 (3 by maintainers)

github_iconTop GitHub Comments

2reactions
lukewalczakcommented, Aug 18, 2022

I will do my best to investigate that issue.

0reactions
lukewalczakcommented, Aug 22, 2022
Read more comments on GitHub >

github_iconTop 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 >

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