callstack / callstack/react-native-paper

bug: outlined TextInput labels resizing with imperatively set value

Ouverte
#4,245 1 commentaire 5 réactions 0 personnes assignées Voir sur GitHub
bug
Langage dominant
TypeScript
Étoiles
14.5k
Forks
2.2k
Merge moyen
5 j 23 h
PR mergées (30 j)
12

Description

### 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

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par reproduire le problème avec l’extrait de TextInput outlined fourni en utilisant à la fois value et defaultValue, puis comparez le comportement entre react-native-paper 5.10.6 et 5.11.x. Suivez l’implémentation de outlined TextInput et vérifiez que le label reste à la position attendue lors du rendu initial dans les environnements iOS et Android listés.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
react-native, typescript
Domaine
mobile
Type d'issue
Bug
Difficulté
3/5
Temps estimé
1-2 jours
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
48/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.