Skip to content

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

Open
@raphaelmerx

Description

@raphaelmerx

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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions