TextInput without label wraps the value of the field

[lmcjt37]

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

[github-actions]

Couldn't find version numbers for the following packages in the issue:

• react-native
• react-native-vector-icons
• npm
• expo

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• react-native-paper (found: 4.7.1, latest: 4.8.1)
• yarn (found: 1.22.5, latest: 1.22.10)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[github-actions]

Couldn't find version numbers for the following packages in the issue:

• react-native-vector-icons
• npm
• expo

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• react-native (found: 0.63.4, latest: 0.64.0)
• yarn (found: 1.22.5, latest: 1.22.10)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[github-actions]

Couldn't find version numbers for the following packages in the issue:

• npm
• expo

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• react-native (found: 0.63.4, latest: 0.64.0)
• yarn (found: 1.22.5, latest: 1.22.10)
• react-native-vector-icons (found: 8.0.0, latest: 8.1.0)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[github-actions]

Couldn't find version numbers for the following packages in the issue:

• expo

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• react-native (found: 0.63.4, latest: 0.64.0)
• npm (found: 7.10.0, latest: 7.11.1)
• yarn (found: 1.22.5, latest: 1.22.10)
• react-native-vector-icons (found: 8.0.0, latest: 8.1.0)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[lmcjt37]

Upgraded some of the tooling, and reflected that in the edited comment.

Issue is still appearing with environment details above. Not using Expo.

[lmcjt37]

I have managed to solve my requirements, by adjusting some styles based on the behaviour the padding creates after some investigation into how the paper component works and calculates the padding when the label is present.

The styles I used to adjust to what I needed were;

textWrapFix: Platform.select({
  ios: {
    paddingBottom: 12,
    height: 52,
  },
}),

and the component based on example given;

return (
  <TextInput
    value={text}
    onChangeText={text => setText(text)}
    label={Platform.OS === 'ios' ? label : null}
  />
);

This adjusts it to match the expected 64 height set for a flat text input component. I also had to adjust my right icon adornments due to the additional padding, so would expect all adornments to be affected.

The bug is still present however, and doesn't function as expected where the value should simply clip rather than wrap as though it's a multiline. As I am providing a "hack" where I am technically still showing the label, but hiding it from being seen.

[lukewalczak]

Hey @lmcjt37, that issue looks similarly to the bug from react-native related to setting textAlign which we are handling within our input due to RTL.

More details: #2581.

[lmcjt37]

@lukewalczak Looks like it is the exact same issue. textAlign: 'auto' has fixed the wrapping issue and added the expected ellipsis.

Which is great as now I can remove the hack 😅

Happy for this issue to be closed if not needed now.