react / react/react-native

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

Đang mở
#41,605 2 bình luận 0 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

API: Keyboard Component: Button Issue: Author Provided Repro Needs: Triage :mag: Newer Patch Available Platform: iOS
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

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

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. 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.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Hướng nghiên cứu

Bắt đầu với Expo Snack được liên kết và tái hiện hành vi trên iOS bằng cách sử dụng Keyboard.dismiss() với các component TextField và button hoặc Pressable. Truy vết hành vi loại bỏ bàn phím và focus từ điểm bắt đầu đó; hoàn tất có nghĩa là việc loại bỏ bàn phím không cuộn đến hoặc focus lại vào field đã được chỉnh sửa trước đó.

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
Đình trệ
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
35/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.