TextInput content scrolls in outlined mode on Android

[pedrobneto]

Current behaviour

When height property is set on an outlined input, it becomes scrollable when focused

Edit: only happens on Android

Expected behaviour

TextInput should not be scrollable

Code sample

`import * as React from 'react';
import {TextInput} from 'react-native-paper';

export default function App() {
return (
<TextInput
style={{marginTop: 24, height: 40}}
mode='outlined'
placeholder='This placeholder will scroll when focused'
/>
);
}`

Screenshots (if applicable)

What have you tried

Your Environment

software	version
ios or android
react-native	"4.13.0"
react-native-paper	"^4.8.1"
node	"14.7.0"
npm or yarn	"7.12.0"
expo sdk	"3.24.0"

Snack that reproduces the issue:
https://snack.expo.io/6tTczRnvw

[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: 4.13.0, latest: 0.64.1)
• yarn (found: 7.12.0', 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: 4.13.0, latest: 0.64.1)
• yarn (found: 7.12.0, latest: 1.22.10)

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

[lukewalczak]

Hey @PedroBern, I will check that, however since you set the height on 40 maybe you can use the prop dense as a workaround?

[pedrobneto]

Hi @lukewalczak, thanks for replying. I'm currently using dense, but this happens regardless of the height set, it will still "scroll", which makes it impossible to use inside a SrollView, for example.

[lukewalczak]

@PedroBern Without specifying the height and with dense prop, I'm not able to observe the input scrolling issue on the snack. Do I miss something?

[pedrobneto]

@lukewalczak, you do need to specify the height to reproduce it, I meant that it doesn't matter what height value you use, the bug still happens. Using the dense prop without height is working for me as well.

[sommcz]

same here, on android. If i specify any height, it happens. Calculated paddingTop/Bottom is probably too big. But if i change it to zero (with render prop), it works as expected in my case (text is already aligned in the center so paddingTop/Bottom is not needed for my single line case).

react-native-paper: 4.12.1
react-native: 0.67.4

[lukewalczak]

@sommcz could you please attach the snack presenting the issue?

[sommcz]

https://snack.expo.dev/wV8wWJ9pS

Type some text and drag it up and down.

[Ahaseeb98]

facing same issue on android any solution for this issue other then dense prop?

[sommcz]

facing same issue on android any solution for this issue other then dense prop?

i've used render prop to render TextInput with overriden style (paddingTop/Bottom: 0) => it works.

[rahmanharoon]

Whats the solution for this

[H4mxa]

any update on this issue,

[Ujjwal-Neupane]

Giving maxHeight and justifyContent: 'center' worked for me

[Dhurika-V]

facing same issue on android any solution for this issue other then dense prop?

i've used render prop to render TextInput with overriden style (paddingTop/Bottom: 0) => it works.

can you please share the snack? I'm getting like two TextInput one over another, one with default props.