callstack / callstack/react-native-paper

bug: outlined TextInput labels resizing with imperatively set value

オープン
#4,245 コメント 1 件 リアクション 5 件 担当者 0 名 GitHub で見る
bug
主要言語
TypeScript
スター
14.5k
フォーク
2.2k
平均マージ
5日 23時間
マージ済み PR(30日)
12

説明

### Current behaviour
There is a visual bug introduced in [5.11.0](https://github.com/callstack/react-native-paper/compare/v5.10.6...v5.11.0) related to the`outlined` styled `TextInput` that is causing inputs with their values set imperatively, either via `defaultValue` or `value` render the label and then snap to the left margin.

https://github.com/callstack/react-native-paper/assets/5914225/408f84ae-38e5-4364-bc03-0144d31ef09b

### Expected behaviour
Prior to 5.11.0, labels rendered in the expected position.

https://github.com/callstack/react-native-paper/assets/5914225/fff05db6-9270-4533-83c5-6985c27e37b7

### How to reproduce?
Added a `TextInput` components with `mode="outlined"` and an imperatively set value. `value` and `defaultValue` will both result in the behavior. Expect the input to display the label snapping behavior on initial render.
``

### Preview
- Video examples above

### What have you tried so far?
- [Expo Snack](https://snack.expo.dev/@awalker00/outlined-input-label)

### Your Environment

| software | version
| --------------------- | -------
| ios | 16, 17
| android | 32, 33
| react-native | 0.71, 0.72
| react-native-paper | 5.11.x
| node | 18.7.0
| npm or yarn | npm
| expo sdk | 49.0.0

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

Start by reproducing the issue with the provided outlined TextInput snippet using both value and defaultValue, then compare behavior between react-native-paper 5.10.6 and 5.11.x. Trace the outlined TextInput implementation and verify that the label remains in its expected position on initial render across the listed iOS and Android environments.

索引モデルが issue の本文から書いたものです。

評価

技術スタック
react-native, typescript
領域
mobile
issue の種類
バグ
難易度
3/5
見積もり時間
1〜2日
活発さ
停滞
明瞭さ
おおむね明確
初心者へのやさしさ
48/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。