Screen jumps when secureTextEntry is set and the keyboard suggests passwords before focusing on the input with secureTextEntry prop
Chưa có ai nhận issue này.
- Ngôn ngữ chính
- C++
- Star
- 127k
- Fork
- 25.3k
- Merge trung bình
- 1 ngày 23 giờ
- Pull request đã merge (30 ngày)
- 4
Mô tả
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
Hướng dẫn đóng góp
Bắt đầu từ đâu
- Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
- Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
- Fork repository và làm thay đổi trên một nhánh.
- Mở pull request có tham chiếu số hiệu của issue.
Hướng nghiên cứu
Bắt đầu bằng cách chạy reproducer SecureTextEntryJump được liên kết trên iOS với React Native 0.74.5, tập trung vào ô nhập tên người dùng trước ô nhập mật khẩu rồi nhập liệu. Theo dõi hành vi của TextInput secureTextEntry cùng với KeyboardAvoidingView; được xem là hoàn tất khi các gợi ý mật khẩu không còn xuất hiện hoặc biến mất theo cách khiến màn hình bị nhảy.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Đánh giá
- Công nghệ
- ios, react-native
- Lĩnh vực
- mobile
- Loại issue
- Lỗi
- Độ khó
- 4/5
- Thời gian dự kiến
- 3-5 ngày
- Mức độ hoạt động
- Ít trao đổi
- Độ rõ ràng
- Khá rõ ràng
- Mức phù hợp với người mới
- 48/100