TextInput without label wraps the value of the field #2684
Description
Current behaviour
When using a TextInput component, if I omit the label prop on iOS and then input something longer than the input's width, the value will wrap onto the next line. Also note I am not using multiline so this isn't expected behaviour.
Expected behaviour
I should expect the value not to wrap, but instead clip the value of the text input.
Code sample
import * as React from 'react';
import { TextInput } from 'react-native-paper';
const MyComponent = () => {
const [text, setText] = React.useState('');
return (
<TextInput
value={text}
onChangeText={text => setText(text)}
/>
);
};
export default MyComponent;
Screenshots (if applicable)
What have you tried
Steps to fix: N/A
Steps to reproduce:
- Use a standard paper text input
- Do not define any additional properties for the component, other than what's needed to change/update text
- Type into the input until the value is longer than the width of the input.
- Tap away from the input (blur) and notice how the value/text wraps (as seen in the screenshot)
Your Environment
| software | version |
|---|---|
| ios | iOS 14.4 (iPhone 11) |
| android | N/A |
| react-native | 0.63.4 |
| react-native-paper | 4.8.1 |
| node | 16.0.0 |
| npm | 7.10.0 |
| yarn | 1.22.5 |
| expo sdk | N/A |
| react-native-vector-icons | 8.0.0 |