Screen jumps when secureTextEntry is set and the keyboard suggests passwords before focusing on the input with secureTextEntry prop
まだ誰も着手していません。
- 主要言語
- C++
- スター
- 127k
- フォーク
- 25.3k
- 平均マージ
- 1日 23時間
- マージ済み PR(30日)
- 4
説明
Description
The screen jumps when one of the inputs has the secureTextEntry prop because the keyboard suggests passwords even when typing in a different input that doesn’t have secureTextEntry prop. This happens when focusing on an input placed before the one with secureTextEntry, and as you type, the password suggestion appears and disappears, causing the screen to jump.
https://github.com/user-attachments/assets/14403cee-3d9c-4951-855e-7591f18c4fb8
Steps to reproduce
As you can see in the code, username input doesn't have sceureTextEntry prop set and still suggests passwords above the keyboard, this suggestion appears and disappears as you type causing the app to jump, this only happens when focusing the input just before the one that has the secureTextProp set to true.
`export default function HomeScreen() {
const passRef = useRef(null)
const usernameRef = useRef(null)
return (
<KeyboardAvoidingView
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
style={styles.container}
>
Header
<TextInput
placeholder='Email'
keyboardType='email-address'
returnKeyType='next'
blurOnSubmit={false}
onSubmitEditing={() => usernameRef.current?.focus()}
style={styles.textInput}
/>
<TextInput
ref={usernameRef}
placeholder='Username'
returnKeyType='next'
blurOnSubmit={false}
onSubmitEditing={() => passRef.current?.focus()}
style={styles.textInput}
/>
<Button title='Submit' onPress={() => null} />
)
}`
React Native Version
0.74.5
Affected Platforms
Runtime - iOS
Output of npx react-native info
System:
OS: macOS 14.6.1
CPU: (8) arm64 Apple M1
Memory: 819.86 MB / 16.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 20.17.0
path: ~/.nvm/versions/node/v20.17.0/bin/node
Yarn:
version: 3.6.4
path: /opt/homebrew/bin/yarn
npm:
version: 10.8.2
path: ~/.nvm/versions/node/v20.17.0/bin/npm
Watchman:
version: 2024.10.14.00
path: /opt/homebrew/bin/watchman
Managers:
CocoaPods:
version: 1.15.2
path: /opt/homebrew/bin/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 23.4
- iOS 17.4
- macOS 14.4
- tvOS 17.4
- visionOS 1.1
- watchOS 10.4
Android SDK: Not Found
IDEs:
Android Studio: 2024.1 AI-241.18034.62.2412.12266719
Xcode:
version: 15.3/15E204a
path: /usr/bin/xcodebuild
Languages:
Java:
version: 17.0.12
path: /usr/bin/javac
Ruby:
version: 3.3.5
alejandrovega@Mac-mini-de-Alejandro inputtest % npx react-native info
info Fetching system and libraries information...
System:
OS: macOS 14.6.1
CPU: (8) arm64 Apple M1
Memory: 521.91 MB / 16.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 20.17.0
path: ~/.nvm/versions/node/v20.17.0/bin/node
Yarn:
version: 3.6.4
path: /opt/homebrew/bin/yarn
npm:
version: 10.8.2
path: ~/.nvm/versions/node/v20.17.0/bin/npm
Watchman:
version: 2024.10.14.00
path: /opt/homebrew/bin/watchman
Managers:
CocoaPods:
version: 1.15.2
path: /opt/homebrew/bin/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 23.4
- iOS 17.4
- macOS 14.4
- tvOS 17.4
- visionOS 1.1
- watchOS 10.4
Android SDK: Not Found
IDEs:
Android Studio: 2024.1 AI-241.18034.62.2412.12266719
Xcode:
version: 15.3/15E204a
path: /usr/bin/xcodebuild
Languages:
Java:
version: 17.0.12
path: /usr/bin/javac
Ruby:
version: 3.3.5
path: /opt/homebrew/bin/ruby
npmPackages:
"@react-native-community/cli": Not Found
react:
installed: 18.2.0
wanted: 18.2.0
react-native:
installed: 0.74.5
wanted: 0.74.5
react-native-macos: Not Found
npmGlobalPackages:
"*react-native*": Not Found
Android:
hermesEnabled: true
newArchEnabled: false
iOS:
hermesEnabled: true
newArchEnabled: false
Stacktrace or Logs
No stacktrace error or logs
Reproducer
https://github.com/avega99/SecureTextEntryJump
Screenshots and Videos
https://github.com/user-attachments/assets/9eb7f18f-7247-4140-9905-a9d1940b48d5
コントリビューションガイド
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
調査の方向性
まず、リンクされている SecureTextEntryJump の再現コードを iOS 上で React Native 0.74.5 とともに実行し、パスワード入力の前にユーザー名入力にフォーカスして入力します。TextInput secureTextEntry の動作を KeyboardAvoidingView と併せて追跡します。パスワード候補が画面をジャンプさせるような形で表示されたり消えたりしなくなれば完了です。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- ios, react-native
- 領域
- mobile
- issue の種類
- バグ
- 難易度
- 4/5
- 見積もり時間
- 3〜5日
- 活発さ
- 静か
- 明瞭さ
- おおむね明確
- 初心者へのやさしさ
- 48/100