React-native: Focus on TextInput in the ScrollView have bug

[mgolkardev]

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

Environment:
OS: win 10
Node: 8.1.3
Yarn: 1.3.2
npm: 4.6.1
Watchman: -
Xcode: -
Android Studio: 3.0.1

Packages:
react-native: 0.51.0
react: 16.0.0-alpha.12

Target Platform: Android 6

Hi
When typing, if you tap on another TextInput, the keyboard closes.

import React, { Component } from 'react';
import {
  AppRegistry,
  Text,
  View,
  ScrollView,
  TouchableOpacity,
  Keyboard,
  TextInput
} from 'react-native';

class App extends Component {
  render() {
    return (
      <View style={{ flex: 1, backgroundColor: '#f9f8f4', paddingTop: 50 }}>
        <TouchableOpacity
          style={{ padding: 10, margin: 10, borderWidth: 1, borderColor: 'grey', borderRadius: 5 }}
          onPress={Keyboard.dismiss}
        >
          <Text>Button to Dismiss</Text>
        </TouchableOpacity>
        <ScrollView keyboardShouldPersistTaps="never" style={{ flex: 1 }}>
          <TextInput
            ref={ref => this.input1 = ref}
            onFocus={() => this.input1.focus()}
            style={{ borderWidth: 1, borderColor: 'red', height: 50, margin: 10 }}
          />
          <TextInput
            ref={ref => this.input2 = ref}
            onFocus={() => this.input2.focus()}
            clearButtonMode="while-editing"
            style={{ borderWidth: 1, borderColor: 'red', height: 50, margin: 10 }}
          />
          <TextInput
            ref={ref => this.input3 = ref}
            onFocus={() => this.input3.focus()}
            clearButtonMode="while-editing"
            style={{ borderWidth: 1, borderColor: 'red', height: 50, margin: 10 }}
          />
        </ScrollView>
      </View>
    );
  }
}

AppRegistry.registerComponent(
  'AwesomeProject2',
  () => App
);

Thanks.

[derakhshanfar]

same issue for me, unfortunately Textinput in ScrollView has a lot of bug specially in RTL mode, like this issue #12167

[ravirajn22]

You should try using keyboardShouldPersistTaps='handled'.

From react-native doc
'handled', the keyboard will not dismiss automatically when the tap was handled by a children, (or captured by an ancestor).

[mgolkardev]

Thanks a lot @ravirajn22