Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Deleting an entire line in a long text inside an input makes scroll to the top on iOS #512

Open
ticketapp opened this issue Jul 18, 2024 · 5 comments · May be fixed by #546
Open

Deleting an entire line in a long text inside an input makes scroll to the top on iOS #512

ticketapp opened this issue Jul 18, 2024 · 5 comments · May be fixed by #546
Assignees
Labels
🍎 iOS iOS specific KeyboardAwareScrollView 📜 Anything related to KeyboardAwareScrollView component

Comments

@ticketapp
Copy link

ticketapp commented Jul 18, 2024

Describe the bug
When I delete an entire line of a long text it makes the scroll view scroll to the top. It happend on Android on 1.11.6 as well but has been fixed between 1.11.6 and the current version (1.12.6)

Code snippet
<KeyboardAwareScrollView> <Input.Area autoFocus scrollEnabled={false} value={editText} minHeight={55} onChangeText={setEditText} /> </KeyboardAwareScrollView>

Expected behavior
The view shouldn't scroll if the line is not hidden

Screenshots
https://github.com/user-attachments/assets/fcf71eba-a64b-46ac-bfc8-bb1db930b522

Smartphone (please complete the following information):

  • Device: iPhone SE 2020 (but we tested with different iphones)
  • OS:17.5.1
  • RN version: 0.73.6
  • RN architecture: new
  • JS engine: Hermes
  • Library version: [e.g. 1.2.0]
@kirillzyusko kirillzyusko added 🍎 iOS iOS specific KeyboardAwareScrollView 📜 Anything related to KeyboardAwareScrollView component labels Jul 18, 2024
@kirillzyusko
Copy link
Owner

@ticketapp do you have a big single TextInput (multiline, but with disabled scroll) on the page?

Does it makes sense to use the KeyboardAwareScrollView or maybe it would be better to use KeyboardAvoidingView in this case? 🤔

@ticketapp
Copy link
Author

@kirillzyusko yes I have a big single TextInput (multiline with disabled scoll) on this page, but I have an other page with other elements of undetermined height where I need a KeyboardAwareScrollView

@kirillzyusko
Copy link
Owner

@ticketapp in your case the problem happens, because KeyboardAwareScrollView detects text changes inside inputs and tries to assure, that input is located within visible area and is not obscured by header or keyboard:

Since you have a big input which is simultaneously obscured by keyboard and header - whenever you modify the text it will scroll down.

A straightforward approach would be to add a new property to KeyboardAwareScrollView and allow to run this handler (onChangeText) conditionally.

A more sophisticated approach would be to track cursor position (onSelectionChange from useFocusedInputHandler) and assure it's always in visible area but it would require more code changes😅

I think temporarily you can patch-package this library and comment out onChangeText handler - and in a meantime I'll try to invent a solution that will cover all the cases 👍

@ticketapp
Copy link
Author

Thank you very much for your response

@youssdevx
Copy link

Many thanks @kirillzyusko 🙏🏽

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🍎 iOS iOS specific KeyboardAwareScrollView 📜 Anything related to KeyboardAwareScrollView component
Projects
None yet
3 participants