callstack / callstack/react-native-paper

TextInput keyboard opens when scroll long text

Ouverte
#4,666 2 commentaires 0 réactions 0 personnes assignées Voir sur GitHub
bug TextInput
Langage dominant
TypeScript
Étoiles
14.5k
Forks
2.2k
Merge moyen
5 j 23 h
PR mergées (30 j)
12

Description

### Current behaviour

When `TextInput` contains long text, the text can scroll. But when the text scrolls, the Keyboard automatically pops up and scroll to the cursor position.
### Expected behaviour
The keyboard only open if user want to edit the text. When the user wants to reread the entered text, do not open the Keyboard to block the view and do not automatically scroll to the cursor position.
### How to reproduce?
```typescript
const [prompt, setPrompt] = useState('a very long text')

}
mode="flat"
clearButtonMode="always"
multiline
blurOnSubmit={true}
value={prompt}
style={{
flex: 1,
backgroundColor: undefined,
}}
onChangeText={(t) => {
setPrompt(t)
}}
returnKeyType="done"
collapsable
outlineStyle={{
borderRadius: 20,
borderWidth: 0,
borderBottomWidth: 0,
backgroundColor: undefined
}}
contentStyle={{
marginTop: 5,
borderBottomWidth: 0,
}}
underlineStyle={{
height: 0
}}
autoFocus={false}
focusable={false}
// showSoftInputOnFocus={false}
placeholder={'Enter your text'}
/>
```
### Preview
video when I try to scroll up, the keyboard open and TextInput scroll down:
https://drive.google.com/file/d/1FRVE6os4xCts-84AXWpzl-_nGNgRSzxM/view?usp=sharing

### Your Environment
``` npx @react-native-community/cli info ```

```
info Fetching system and libraries information...
(node:66971) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
System:
OS: macOS 15.3.1
CPU: (8) arm64 Apple M2
Memory: 117.48 MB / 16.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 23.5.0
path: /opt/homebrew/bin/node
Yarn:
version: 3.6.4
path: /opt/homebrew/bin/yarn
npm:
version: 10.9.2
path: /opt/homebrew/bin/npm
Watchman:
version: 2024.12.02.00
path: /opt/homebrew/bin/watchman
Managers:
CocoaPods:
version: 1.14.3
path: /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 24.2
- iOS 18.2
- macOS 15.2
- tvOS 18.2
- visionOS 2.2
- watchOS 11.2
Android SDK: Not Found
IDEs:
Android Studio: 2024.3 AI-243.22562.218.2431.13114758
Xcode:
version: 16.2/16C5032a
path: /usr/bin/xcodebuild
Languages:
Java:
version: 17.0.10
path: /usr/bin/javac
Ruby:
version: 2.6.10
path: /usr/bin/ruby
npmPackages:
"@react-native-community/cli": Not Found
react:
installed: 18.2.0
wanted: 18.2.0
react-native:
installed: 0.74.2
wanted: 0.74.2
react-native-macos: Not Found
npmGlobalPackages:
"*react-native*": Not Found
Android:
hermesEnabled: true
newArchEnabled: false
iOS:
hermesEnabled: true
newArchEnabled: false

info React Native v0.78.1 is now available (your project is running on v0.74.2).
info Changelog: https://github.com/facebook/react-native/releases/tag/v0.78.1
info Diff: https://react-native-community.github.io/upgrade-helper/?from=0.74.2
info For more info, check out "https://reactnative.dev/docs/upgrading?os=macos".
```

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par l’implémentation de React Native Paper TextInput et par son comportement en matière de focus, de défilement et de clavier ; l’issue ne nomme aucun fichier source ni aucun test. Reproduisez l’exemple de texte long multiligne sur iOS, puis vérifiez que faire défiler le texte pour le relire n’ouvre pas le clavier et ne déplace pas le curseur dans la zone visible, tandis que la modification continue de fonctionner.

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

Évaluation

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

Recevez les nouvelles issues par e-mail

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