Calling `Keyboard.dismiss()` in a button is scrolling to focused input in iOS
まだ誰も着手していません。
- 主要言語
- C++
- スター
- 127k
- フォーク
- 25.3k
- 平均マージ
- 1日 23時間
- マージ済み PR(30日)
- 4
説明
Description
I have a form with several fields (TextField) and in the end a button that sends the form data to a server and navigates to another screen if successful.
When I'm clicking the button, I dismiss the keyboard and that is causing the last modified input to be focused (it's scrolled into view). Even if I change the button (a Pressable) to only call Keyboard.dismiss(), this issue still happens.
From what I tested this only happens if I type characters in the input: if I only tap the input so that it has focus, it works fine; if I only delete some characters it also works fine, that is, the input is not focused (and scrolled to) when I call Keyboard.dismiss().
This only happens in iOS (in Android, it works correctly, without scrolling to the input).
It also works if I click in the keyboard "Return" button before clicking the button (it closes the keyboard, but doesn't scroll to the field). If there is a way to trigger it programatically, it could be used as a workaround.
React Native Version
0.72.7
Output of npx react-native info
System:
OS: Linux 5.4 Ubuntu 20.04.6 LTS (Focal Fossa)
CPU: (4) x64 Intel(R) Core(TM) i7-3537U CPU @ 2.00GHz
Memory: 3.02 GB / 11.57 GB
Shell:
version: 5.0.17
path: /bin/bash
Binaries:
Node:
version: 16.20.2
path: /usr/bin/node
Yarn: Not Found
npm:
version: 8.19.4
path: /usr/bin/npm
Watchman:
version: 20221204.222904.0
path: /usr/local/bin/watchman
SDKs:
Android SDK: Not Found
IDEs:
Android Studio: AI-203.7717.56.2031.7621141
Languages:
Java:
version: 11.0.20.1
path: /usr/bin/javac
Ruby: Not Found
npmPackages:
"@react-native-community/cli": Not Found
react:
installed: 18.2.0
wanted: 18.2.0
react-native:
installed: 0.72.7
wanted: 0.72.7
npmGlobalPackages:
"*react-native*": Not Found
Android:
hermesEnabled: Not found
newArchEnabled: Not found
iOS:
hermesEnabled: Not found
newArchEnabled: Not found
Steps to reproduce
Have a form with several TextField components and a button at the end. Call Keyboard.dismiss() in the button. Make it so that when you go to the end of the screen, the first fields are not visible.
Type anything in one of the first fields (it can be any field, as long as it's not visible in the end of the screen).
Let the keyboard open, then go to the end of the screen and tap the button (you can also tap outside of any field to close the keyboard).
If you are using iOS, the Textfield is focused (the screen will scroll and focus it).
Snack, screenshot, or link to a repository
https://snack.expo.dev/@lucas99freelas/textfield-keyboard-ios?platform=ios
コントリビューションガイド
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
調査の方向性
リンクされた Expo Snack から始め、TextField コンポーネントと button または Pressable で Keyboard.dismiss() を使用して iOS 上の挙動を再現します。そのエントリーポイントからキーボードの解除とフォーカスの挙動を追跡します。完了の条件は、キーボードを解除しても以前に編集していたフィールドまでスクロールしたり、そこに再度フォーカスしたりしないことです。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- ios, react-native
- 領域
- mobile
- issue の種類
- バグ
- 難易度
- 4/5
- 見積もり時間
- 3〜5日
- 活発さ
- 停滞
- 明瞭さ
- おおむね明確
- 初心者へのやさしさ
- 35/100