TextInput with textAlign='right' inside a ScrollView gets focused on scroll (Android only)

[mmazzarolo]

trafficstars

Description

Hello there, I've found a small issue on Android.
When a TextInput with has textAlign: 'right' inside a ScrollView and you press on it for scrolling it will focus instead (only on Android).
The correct behaviour would be to get focused only if you tap on it (without scrolling).
It works perfectly on iOS or if you remove the textAlign style.

EDIT: I'm having the same issue with textAlign: 'center'.
Works correctly with every other prop (left, justify, auto).

Reproduction

You can test it easily:

<ScrollView>
  <TextInput style={{ textAlign: 'right' }} />
  <View style={{ height: 2000 }} />
</ScrollView>

Additional Information

• React Native version: 0.40
• Platform: Android (tested on an emulated Nexus 5 and on real Moto G3)
• Operating System: MacOS

[hoangpham95]

I just tested with react-native 0.40.0 and cannot reproduce the problem. Which Android version are you running in your devices?

[mmazzarolo]

That's weird. Are you starting the scroll by tapping the textinput?
Also, is that a blank project?
I'm on 5.1.0.

Oh, and thank you for trying it man!

[hoangpham95]

Yes, this is a blank project. I'm starting outside of the TextInput. If you tap the text input then it should be focused, so I think this might not be an issue.

[mmazzarolo]

Ah-ha, there it is!
Nope, it should not be focused because:

1. If you remove the textAlign prop it doesn't get focused
2. On iOS it doesn't get focused
3. On many different native apps I tried it doesn't get focused (for example try the form in the new contact screen in Android)

Thank you anyway :)

[hoangpham95]

You're right, I tried and saw the problem. The textAlign caused the text input to be focused on touch.

[AndyJinSS]

I have the same problem on react-native 0.45.1

[igofind]

+1 No one can solve this problem?

[pecopeco]

+1 multiline={true} keyboardType={"default"} and limit the maxLength can solve this problem temporarily @igofind

[turlac]

+1 @pecopeco just made my day. thank you for the workaround! Any idea how we can get around the keyboard limitation of it having to be 'default' and not 'numeric'?

[igofind]

@pecopeco Thanks ! It works!

[kengjungwa]

@pecopeco works but NOT on keyboardType={"numeric"}

[ahmetacikgoz]

+1 Same issue!

[programmdesign]

@pecopeco: thanks for the workaround. We can't use multiline though. Any idea for a workaround w/o multilines?

[enamin]

+1 Same Issue

[yuvalsegev]

+1

Anyone willing to help?

[moughxyz]

I solved this issue by installing a PanResponder:

  componentWillMount: function() {
    this._panResponder = PanResponder.create({
      // Ask to be the responder:
      onStartShouldSetPanResponder: (evt, gestureState) => true,
      onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
      onMoveShouldSetPanResponder: (evt, gestureState) => true,
      onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,

      onPanResponderGrant: (evt, gestureState) => {
        // The gesture has started. Show visual feedback so the user knows
        // what is happening!

        // gestureState.d{x,y} will be set to zero now
      },
      onPanResponderMove: (evt, gestureState) => {
        // The most recent move distance is gestureState.move{X,Y}

        // The accumulated gesture distance since becoming responder is
        // gestureState.d{x,y}
      },
      onPanResponderTerminationRequest: (evt, gestureState) => true,
      onPanResponderRelease: (evt, gestureState) => {
        // The user has released all touches while this view is the
        // responder. This typically means a gesture has succeeded
      },
      onPanResponderTerminate: (evt, gestureState) => {
        // Another component has become the responder, so this gesture
        // should be cancelled
      },
      onShouldBlockNativeResponder: (evt, gestureState) => {
        // Returns whether this component should block native components from becoming the JS
        // responder. Returns true by default. Is currently only supported on android.
        return true;
      },
    });
  },

Then on your main view:

 <View {...this._panResponder.panHandlers} />

[nishiltamboli]

@pecopeco Thanks mate that worked like a charm. Weird issue really.

[moughxyz]

For the record, The TextInput component is rendered inside of a TouchableWithoutFeedback that focuses on press, so I'm not sure how long any of these workarounds will last:

https://github.com/facebook/react-native/blob/master/Libraries/Components/TextInput/TextInput.js#L799

You might also be able to subclass TextInput, override the render method, and remove the Touchable wrapper.

[derakhshanfar]

same issue for me, my textInput is numeric and i don't want a multiLine textinput

[derakhshanfar]

@mobitar could you write example please?

[aizigao]

same problem, has some solution ?

[derakhshanfar]

any solution?!

[yqz0203]

@derakhshanfar did you have resolved this problem?

[louislatreille]

+1 I also have the same issue when manually setting the height of the text input under the default height. This causes it to be vertically scrollable, and eat the ScrollView scroll action. Having the height set like that, removing the textAlign prop or the workaround proposed by @pecopeco aren't even working.

[derakhshanfar]

@yqz0203 according to this issue #15274 i think the problem is related to this but i couldn't fix it yet!

However, sometimes a parent will want to make sure that it becomes responder. This can be handled by using the capture phase. Before the responder system bubbles up from the deepest component, it will do a capture phase, firing on*ShouldSetResponderCapture. So if a parent View wants to prevent the child from becoming responder on a touch start, it should have a onStartShouldSetResponderCapture handler which returns true.

[yanhaijing]

I have the same problem on react-native 0.45.1

[feong]

I have the similar issue with RN 0.49.5 When there is a placeholder for a TextInput with AlignText = 'right', touch on it and move the finger away, the placeholder will disappeared.

[Tankerxyz]

Just wrap all your content in TouchableOpacity with activeOpacity={1} props.

[thgala]

Setup:

"react": "16.0.0",
"react-native": "0.49.3",

Number input component:

focus = () => {
  if (this.inputRef) {
    this.inputRef.focus();
  }
}

inputRef: ?TextInput;

assignRef = (inputRef: ?TextInput) => {
  if (inputRef) {
    this.inputRef = inputRef;
  }
}

render() {
  return (
    <TextInput
      keyboardType="numeric"
      ref={inputRef => this.assignRef(inputRef)}
      {...this.props}
    />
  );
}

Form component:

handleInputPress = () => {
  if (this.input) {
    this.input.focus();
  }
}

input: ?NumberInput;

assignNumberInputRef = (inputRef: ?NumberInput) => {
  if (inputRef) {
    this.input = inputRef;
  }
}

render() {
  return (
    <ScrollView>
      <TouchableOpacity activeOpacity={1} onPress={this.handleInputPress}>
        <View pointerEvents="none">
          <NumberInput
            ref={input => this.assignNumberInputRef(input)}
            textAlign="right"
            ...
          />
        </View>
      </TouchableOpacity>
    </ScrollView>
  )
}

[SunSargent]

@thgala can you show your NumberInput