TextInput without a label is invisible while it is empty and unfocused

Ouverte Adaptée aux débutants
  • Quelque chose ne va pas ?
#5,187 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Les mainteneurs répondent en général sous 1 jour

Personne n'a encore pris cette issue.

Évaluation

Difficulté
2/5
Temps estimé
1-3 heures
Accessibilité débutants
82/100
Type d'issue
Bug
Clarté
Clairement spécifiée
Activité
Active
Stack technique
react-native, typescript
Domaine
frontend

Piste de recherche

Commencez par src/components/TextInput/hooks.ts et TextInput.tsx:401, où animatedContainerStyle est appliqué au conteneur natif du champ de saisie. Vérifiez comment l’opacité dépend de la présence d’un libellé, puis ajoutez ou adaptez un test pour un TextInput vide, sans focus et sans libellé. Le travail est terminé lorsque son texte indicatif est visible et que le champ avec libellé conserve son comportement de libellé flottant.

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

Description

bug
Current behaviour

A TextInput with no label is invisible while it is empty and unfocused: its input, its placeholder and any prefix or suffix have opacity 0, so only the outline shows until the field is focused. The wrapper around the native input takes the label float opacity (animatedContainerStyle in src/components/TextInput/hooks.ts, applied at TextInput.tsx:401) whether or not there is a label, and that value is 0 while the field is empty and unfocused. In 5.x the placeholder was visible.

Expected behaviour

A TextInput without a label shows its input and placeholder at full opacity at all times. Only a TextInput with a label hides the input while the label rests in its place.

How to reproduce?
const [query, setQuery] = React.useState('');

<TextInput
  variant="outlined"
  placeholder="Search for plugins..."
  value={query}
  onChangeText={setQuery}
/>
  1. Render it: only the outline shows, with no placeholder.
  2. In a test, expect(screen.getByPlaceholderText('Search for plugins...')).toBeVisible() fails with "Received element is not visible".
What have you tried so far?

Applying animatedContainerStyle only when label is set keeps the floating label behaviour and shows the placeholder.

Your Environment
software version
react-native 0.88.1
react-native-paper 6.0.0-alpha.1 and main at c8d8bab
Langage dominant
TypeScript
Étoiles
14.5k
Forks
2.3k
Merge moyen
2 j 12 h
PR mergées (30 j)
22

Préparer son environnement

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de callstack/react-native-paper

Toutes les issues de callstack/react-native-paper

Issues similaires

Plus d'issues TypeScript

Recevez les nouvelles issues par e-mail

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