Unable to move cursor in absolutely positioned TextInput on Android when parent View has zIndex
未关闭
还没有人认领这个 Issue。
Component: TextInput
Issue: Author Provided Repro
Platform: Android
- 主要语言
- C++
- 星标
- 127k
- 派生
- 25.3k
- 平均合并
- 1 天 23 小时
- 30 天内合并 PR
- 4
描述
Description
On Android, when a TextInput is absolutely positioned and its parent View has a zIndex style property applied, the cursor within the TextInput cannot be moved after initial focus. Tapping on different parts of the TextInput does not change the cursor's position.
import React from 'react';
import {View, TextInput} from 'react-native';
export default function App() {
return (
<View style={{flex: 1, backgroundColor: '#fff'}}>
<View
style={{
// Unable to move cursor if we add zIndex here
zIndex: 1,
}}>
<TextInput
style={{
height: 40,
backgroundColor: 'pink',
width: '100%',
position: 'absolute',
top: 200,
}}
/>
</View>
</View>
);
}
Steps to reproduce
- Clone the reproduction repository.
- Run
yarn android. - Type some text into the TextInput.
- Try to move the cursor.
React Native Version
0.79.2
Affected Platforms
Runtime - Android
Output of npx @react-native-community/cli info
System:
OS: macOS 15.3.2
CPU: (10) arm64 Apple M4
Memory: 113.78 MB / 24.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 20.18.1
path: /usr/local/bin/node
Yarn:
version: 1.22.10
path: /usr/local/bin/yarn
npm:
version: 8.15.0
path: /usr/local/bin/npm
Watchman: Not Found
Managers:
CocoaPods:
version: 1.11.3
path: /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 24.4
- iOS 18.4
- macOS 15.4
- tvOS 18.4
- visionOS 2.4
- watchOS 11.4
Android SDK:
Android NDK: 22.1.7171670
IDEs:
Android Studio: 2024.3 AI-243.24978.46.2431.13208083
Xcode:
version: 16.3/16E140
path: /usr/bin/xcodebuild
Languages:
Java:
version: 17.0.12
path: /usr/bin/javac
Ruby:
version: 2.6.10
path: /usr/bin/ruby
npmPackages:
"@react-native-community/cli":
installed: 18.0.0
wanted: 18.0.0
react:
installed: 19.0.0
wanted: 19.0.0
react-native:
installed: 0.79.2
wanted: 0.79.2
react-native-macos: Not Found
npmGlobalPackages:
"*react-native*": Not Found
Android:
hermesEnabled: true
newArchEnabled: true
iOS:
hermesEnabled: Not found
newArchEnabled: false
Stacktrace or Logs
---
no error log
---
MANDATORY Reproducer
https://github.com/SeekingLight233/RnTextInputIssue
Screenshots and Videos
https://github.com/user-attachments/assets/4bfa61e9-f1b5-4746-8906-3864221fda48
贡献指南
从这里开始
- 先读完整个 Issue,再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库,在一个分支上完成修改。
- 提交 Pull Request,并在描述里引用这个 Issue 编号。
调研方向
从必需的复现仓库开始,并运行 yarn android,确认向父元素添加 zIndex 会阻止绝对定位的 TextInput 中的光标移动。比较有无 zIndex 时的行为;当 Android 用户可以点击已获得焦点的 TextInput 的不同部分并正常移动光标时,即表示完成。
由索引模型根据 Issue 内容生成。
评估
- 技术栈
- android, react-native
- 领域
- mobile
- Issue 类型
- 缺陷
- 难度
- 4/5
- 预计耗时
- 3-5 天
- 活跃度
- 活跃
- 描述清晰度
- 基本清楚
- 新手友好度
- 48/100