react / react/react-native

Calling `Keyboard.dismiss()` in a button is scrolling to focused input in iOS

未关闭
#41,605 2 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

还没有人认领这个 Issue。

API: Keyboard Component: Button Issue: Author Provided Repro Needs: Triage :mag: Newer Patch Available Platform: iOS
主要语言
C++
星标
127k
派生
25.3k
平均合并
1 天 23 小时
30 天内合并 PR
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

贡献指南

打开贡献指南

从这里开始

  1. 先读完整个 Issue,再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库,在一个分支上完成修改。
  4. 提交 Pull Request,并在描述里引用这个 Issue 编号。

调研方向

从链接的 Expo Snack 开始,使用 Keyboard.dismiss() 配合 TextField 组件以及 button 或 Pressable,在 iOS 上复现该行为。从这个入口点追踪键盘关闭和焦点行为;完成的标准是,关闭键盘不会滚动到之前编辑的字段,也不会重新聚焦该字段。

由索引模型根据 Issue 内容生成。

评估

技术栈
ios, react-native
领域
mobile
Issue 类型
缺陷
难度
4/5
预计耗时
3-5 天
活跃度
停滞
描述清晰度
基本清楚
新手友好度
35/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。