react / react/react-native

[iOS] Adding outline to `TextInput` causes it to lose focus

Ouverte
#53,440 7 commentaires 1 réaction 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

Component: TextInput Needs: React Native Team Attention Platform: iOS Type: New Architecture
Langage dominant
C++
Étoiles
127k
Forks
25.3k
Merge moyen
1 j 23 h
PR mergées (30 j)
4

Description

Description

On iOS, if TextInput with overflow: hidden is rendered with an outline while focused, it immediately loses focus. This also means that if outline is used to indicate focus state (like on web), the TextInput becomes impossible to interact with.

Steps to reproduce
  1. Run the snack
  2. Switch on "Enable outline"
  3. Press on the text input
  4. Notice how the keyboard closes immediately, and the text input loses focus
React Native Version

0.80.1

Affected Platforms

Runtime - iOS

Output of npx @react-native-community/cli info
N/A — reproduces via Expo Snack/Expo Go
Stacktrace or Logs
N/A
MANDATORY Reproducer

https://snack.expo.dev/@simplecreations/ios---adding-outline-to-textinput-causes-it-to-lose-focus

Screenshots and Videos

https://github.com/user-attachments/assets/de1bdfc6-c0f1-4b71-af15-fce5e45b58c0

Guide de contribution

Ouvrir le guide de contribution

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.

Piste de recherche

Commencez par le reproducteur Expo Snack obligatoire et confirmez le comportement sur iOS avec React Native 0.80.1. Suivez le rendu du TextInput ayant le focus lorsque overflow est masqué et que outline est activé. C’est terminé lorsque le clavier reste ouvert et que le TextInput conserve le focus dans cette configuration.

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

Évaluation

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

Recevez les nouvelles issues par e-mail

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