Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TextInput multiline on web should expand when entering long text #3124

Open
raphaelmerx opened this issue Mar 19, 2022 · 2 comments
Open

TextInput multiline on web should expand when entering long text #3124

raphaelmerx opened this issue Mar 19, 2022 · 2 comments

Comments

@raphaelmerx
Copy link

raphaelmerx commented Mar 19, 2022

Current behaviour

A multiline TextInput element expands to adapt to text content on mobile, but it doesn't on web. Instead a scrollbar appears inside the textarea

Expected behaviour

TextInput expands on web to adapt to text length, like it does on mobile. This is expected under the material guidelines: https://material.io/archive/guidelines/components/text-fields.html#text-fields-field-types

Code sample

https://snack.expo.dev/@raphaelmerx/textinput

Screenshots (if applicable)

Screenshot 2022-03-19 at 12 18 15

What have you tried

Adapting the height through onContentSizeChange, however the textarea never shrinks in size when deleting text:

const [height, setHeight] = useState(undefined)
    <TextInput
	multiline={true}
	onContentSizeChange={(event) => {
		setHeight(event.nativeEvent.contentSize.height)
	}}
	style={{ height }} 
    />

Your Environment

software version
ios or android web
react-native 0.64.3
react-native-paper 4.11.2
node v14.18.1
npm or yarn yarn
expo sdk 43
@github-actions
Copy link

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

  • react-native-vector-icons
  • npm
  • yarn
  • 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.64.3, latest: 0.67.4)

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

@CodingItWrong
Copy link
Contributor

I am experiencing this issue with the following versions (adding the missing version numbers from above):

software version
ios or android web
react-native 0.70.5
react-native-paper 5.1.3
node 16.19.0
npm or yarn yarn
npm 9.2.0
yarn 1.22.19
expo sdk 47.0.13
react-native-vector-icons does not appear in package.json or yarn.lock

Would love to see this fixed for consistency in my app across web and mobile!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants