callstack / callstack/react-native-paper

TextInput multiline on web should expand when entering long text

未关闭
#3,124 2 条评论 3 个 reaction 已指派 0 人 在 GitHub 查看
repro provided TextInput
主要语言
TypeScript
星标
14.5k
派生
2.2k
平均合并
5 天 23 小时
30 天内合并 PR
12

描述

### 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:
```javascript
const [height, setHeight] = useState(undefined)
{
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

贡献指南

打开贡献指南

调研方向

从 TextInput 的 Web 实现开始,并将其多行行为与移动端实现进行比较。使用链接的 Snack 重现该问题,然后验证输入和删除长文本会使 Web 上的 TextInput 在没有内部滚动条的情况下展开和收缩。

由索引模型根据 Issue 内容生成。

评估

技术栈
react-native
领域
frontend, web-dev
Issue 类型
缺陷
难度
3/5
预计耗时
1-2 天
活跃度
停滞
描述清晰度
基本清楚
新手友好度
35/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。