react / react/react-native

Keyboard on iOS 18 changes from uppercase to lowercase when changing the text input field

Ouverte
#47,997 4 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

API: Keyboard Issue: Author Provided Repro Needs: Attention Needs: Repro Platform: iOS
Langage dominant
C++
Étoiles
127k
Forks
25.3k
Merge moyen
1 j 23 h
PR mergées (30 j)
4

Description

Description

I encountered an issue where the keyboard changes from uppercase to lowercase when switching focus between two TextInput fields. Specifically, when focusing from Text Input Field A to Text Input Field B, and then back from Text Input Field B to Text Input Field A, the keyboard behavior unexpectedly switches between uppercase and lowercase.

This issue occurs on iOS 18.

Steps to reproduce
  1. Add two TextInput fields.
  2. Focus on TextInput 1 and input some text (e.g., "T").
  3. Focus on TextInput 2 and input some text (e.g., "B").
  4. Focus back on TextInput 1.
  5. Focus back on TextInput 2.
  6. Observe that the keyboard switches from uppercase to lowercase and the first letter of the text remains uppercase.
                    <View style={styles.mb4}>
                        <TextInput
                            accessibilityLabel="Text input field"
                            style={{
                                width: 100,
                                height: 40, // Added height for the input box
                                borderWidth: 1, // Corrected border style
                                backgroundColor: 'red', // Corrected background color property
                            }}
                        />
                    </View>
                    <View>
                        <TextInput
                            accessibilityLabel="Text input field"
                            style={{
                                width: 100,
                                height: 40, // Added height for the input box
                                borderWidth: 1, // Corrected border style
                                backgroundColor: 'red', // Corrected background color property
                            }}
                        />
                    </View>

https://github.com/user-attachments/assets/515136b9-bbd8-45a5-9112-db6cbce6d148

React Native Version

0.76.3

Affected Platforms

Runtime - iOS

Output of npx react-native info
System:
  OS: macOS 15.0
  CPU: (11) arm64 Apple M3 Pro
  Memory: 244.06 MB / 18.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.15.1
    path: ~/.nvm/versions/node/v20.15.1/bin/node
  Yarn: Not Found
  npm:
    version: 10.7.0
    path: ~/.nvm/versions/node/v20.15.1/bin/npm
  Watchman:
    version: 2024.09.23.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods: Not Found
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.0
      - iOS 18.0
      - macOS 15.0
      - tvOS 18.0
      - visionOS 2.0
      - watchOS 11.0
  Android SDK:
    API Levels:
      - "31"
      - "33"
      - "34"
    Build Tools:
      - 34.0.0
      - 35.0.0
    System Images:
      - android-34-ext12 | Google Play ARM 64 v8a
      - android-34 | Intel x86_64 Atom
      - android-34 | Google APIs ARM 64 v8a
      - android-34 | Google APIs Intel x86_64 Atom
      - android-35 | Google Play ARM 64 v8a
    Android NDK: Not Found
IDEs:
  Android Studio: 2024.1 AI-241.19072.14.2412.12360217
  Xcode:
    version: 16.0/16A242d
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.12
    path: /usr/bin/javac
  Ruby:
    version: 3.3.4
    path: /Users/lehuu/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 15.0.1
    wanted: 15.0.1
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.76.3
    wanted: 0.76.3
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true
Stacktrace or Logs
N/A
Reproducer

https://snack.expo.dev/pT5crg9nC5joocIBBOZGo

Screenshots and Videos

https://github.com/user-attachments/assets/847035b3-39e6-4da6-9bb8-e110302533ba

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 avec le reproducteur Snack lié sur iOS 18 en utilisant React Native 0.76.3, en suivant la séquence de focus avec deux TextInput décrite dans l’issue. Aucun fichier source ni aucun test n’est indiqué ; confirmez la transition des majuscules aux minuscules et définissez la fin comme un comportement cohérent du clavier lors du passage d’un champ à l’autre.

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

Évaluation

Stack technique
ios, react-native
Domaine
mobile-dev
Type d'issue
Bug
Difficulté
4/5
Temps estimé
3-5 jours
Activité
À l'abandon
Clarté
À clarifier
Accessibilité débutants
25/100

Recevez les nouvelles issues par e-mail

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