React-native-keyboard-aware-scroll-view: Autoscroll to TextInput working partially when blurOnSubmit={false}

[anthony-skr]

I noticed that if you use blurOnSubmit={false}, auto scroll to next focused input will be triggered only when its value is not empty.

Pseudo code example :

<KeyboardAwareScrollView>
  <TextInput
              ref='input1'
              onSubmitEditing={this.input2.focus()}
              blurOnSubmit={false}
              returnKeyType='next' />

  <View style={{ height: 500 }} /> /** Make the scroll **/

  <TextInput ref='input2'/>

Tested on Android only.

Expected behavior :

• Write something on input1
• Click on _Next_ button from keyboard
• input2 get the focus
• auto scroll to input2.

Current behavior :

• Write something on input1
• Click on _Next_ button from keyboard
• input2 get the focus
• auto scroll to input2 not done
• Write something on input2
• Auto scroll to input2 done.

Seems related to the fact input1 does not blur() before to give focus.

If you ask why using blurOnSubmit=false: it avoids keyboard to close/reopen everytime we switch of input, on Android at least.

[Swordsman-Inaction]

I tested the code with ScrollView instead of KeyboardAwareScrollView on Android, it also happened. So I guess the KeyboardAwareScrollView doesn't cause this issue.

[alvaromb]

@anthony-skr can you try to remove blurOnSubmit and add keyboardShouldPersistTaps=always?

[alvaromb]

Closing due to inactivity. Ping me if it needs to be reopened!

[jordenchang55]

Same issue here. Tried adding keyboardShouldPersistTaps="always" and removing blurOnSubmit but not work.
For more detail, KeyboardAwareScrollView will work when the input is visible at initial state and will not work for inputs which need to scroll to see them. Click next button to focus on those input will not trigger auto-scroll, and auto-scroll is trigger as soon as I type first char.

[alvaromb]

@jordenchang55 next button behaviour is not implemented, so it won't work with this library. In any case, we cannot reproduce it without a proper code snippet.

[jordenchang55]

<KeyboardAwareScrollView>
  <TextInput
      onSubmitEditing={this.input2.focus()}
      returnKeyType='next' />
  <TextInput
      ref={i=>this.inputs.input2 = i}
      onSubmitEditing={this.input3.focus()}
      returnKeyType='next' />
  <TextInput
      ref={i=>this.inputs.input3 = i}
      onSubmitEditing={this.input4.focus()}
      returnKeyType='next' />
{/* Input4 is outside of visible region*/}
  <TextInput
      ref={i=>this.inputs.input4 = i}/>
</KeyboardAwareScrollView>

Here's the code. For simple, I remove the code about style.
I implement next function by myself, so when I click next button, it will focus on next input. The library can work as expected if current input and next input are both in visible region. For example, click next button on input1, it will scroll to input2 automatically.
But if the next input is not in visible region, i.e. user need to scroll to see it, auto-scroll will not work.

[andreibarabas]

same issue here. if the input is empty, the autoscroll won't work

[dblazeski]

What worked for iOS, is calling blur on the existing input before calling focus on the next one. Haven't tested android yet. This auto-focused inputs that are not viewable.
Ex:

<TextInput 
    ref={input => { this.input1 = input}}
    onSubmitEditing={() => { this.input1.blur(); this.input2.focus() }}
    returnKeyType='next'
        blurOnSubmit={false}
/>
<TextInput 
    ref={input => { this.input2 = input}}
        blurOnSubmit={false}
/>

[rafaelquintanilha]

@dblazeski for me this works on Android, but with an annoying caveat: the keyboard 'flicks', hiding and showing up, what isn't the best UX.
The issue for me happens when I programatically focus on some input, instead of manually clicking on it. When I click, it works as expected. When I use onSubmitEditing in conjunction with blurOnSubmit={false}, it doesn't.

The workaround I found is to manually scroll after submit. This is not perfect because it's dependent on the size of the form. Something like this:

<KeyboardAwareScrollView
  innerRef={ref => { this.scroll = ref; }}
  ...
>
  <TextInput
    onSubmitEditing={() => {
      this.nextInput.focus();
      this.scroll.props.scrollToPosition(0, 500); // Goes to bottom of the page
    }}
    blurOnSubmit={false}
  </TextInput>
</KeyboardAwareScrollView>

[ozberkctn]

Did you find any solution ?

[ozberkctn]

@alvaromb this problem is still exist.

[shaktals]

I am also experiencing similar issue on Android. When autoscrolling to new TextInput, the input field is partially hidden behind keyboard. I spent several hours trying several solutions for the issue, but no good. Looking forward to a fix!

[ozberkctn]

I found the solution can you take a look Pull Request
related this issue