React-native: [0.46.1] TextInput wrapt in touchable, will led touchable stop working

[opp100]

Is this a bug report?

Yes

Have you read the Bugs section of the Contributing to React Native Guide?

Yes

Environment

1. react-native -v: react-native: 0.46.1
2. node -v: v8.1.1
3. npm -v: 5.1.0

Then, specify:

1. Target Platform (e.g. iOS, Android): iOS
2. Development Operating System (e.g. macOS Sierra, Windows 10): macOS
3. Build tools (Xcode or Android Studio version, iOS or Android SDK version, if relevant): Xcode

Expected Behavior

          <TouchableWithoutFeedback onPress={()=>{ //function was working here in 0.45 }>
              <View style={styles.inputContainer}>
                <TextInput
                  editable={false}
                  ref={component => this._input = component}
                  placeholder='Text Input'/>
                <TouchableOpacity
                  onPress={() => {
                    //function only working here now in 0.46
                }}>
                  <View>
                    <Text>Button</Text>
                  </View>
                </TouchableOpacity>
              </View>
          </TouchableWithoutFeedback>

Actual Behavior

The source code above was working perfectly in 0.45, but after I upgrade to 0.46 is not working. However wrapt Image or Text is working fine.

[opp100]

Downgrade to 0.45.1 can fix this issue.

[hramos]

Can you tell us more about the issue you're reporting? What did you expect and what happened instead?

[opp100]

Hey @hramos,

I have do a sample project refer to this bug. There are 2 screen record here, we can see the TextInput wrapt in touchable is working on 0.45.1. But not working on 0.46.1. Also I have tried it on real device, the test result is same as the emulator.

0.46:

        <TouchableOpacity>
          <View>
            <TextInput />     <---- touch not working here
            <View>
              <Text>Text</Text>      <---- touch working here
            </View>
            <TouchableOpacity>    
              <View >
                <Text>Button</Text>     <---- touch working here
              </View>
            </TouchableOpacity> 
          </View>
        </TouchableOpacity>

0.45:
Every where is working probably

source code of this demo project:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

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

export default class testProject extends Component {
  state = {
    output: 0
  }

  onPress() {
    this.setState({
      output: ++this.state.output
    })
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          React Native 0.45.1
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.ios.js
        </Text>
        <Text style={styles.instructions}>
          {`Press ${this.state.output} times`}
        </Text>
        <TouchableOpacity onPress={() => {
          this.onPress()
        }}>
          <View style={styles.inputContainer}>
            <TextInput
              editable={false}
              style={styles.textInput}
              ref={component => this._input = component}
              placeholder='Text Input'/>
            <View>
              <Text>Text</Text>
            </View>
            <TouchableOpacity
              onPress={() => {
              this.onPress()
            }}
              style={styles.button}>
              <View >
                <Text>Button</Text>
              </View>
            </TouchableOpacity>
          </View>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF'
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5
  },
  inputContainer: {
    flexDirection: 'row',
    borderColor: '#555',
    borderRadius: 3,
    borderWidth: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff'
  },
  textInput: {
    width: 200,
    backgroundColor: '#f99',
    height: 40,
    marginRight: 10
  },
  button: {
    marginLeft: 10,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#9f9',
    height: 40
  }
});

AppRegistry.registerComponent('testProject', () => testProject);

By the way, anyone knows how to make code in github colourful?

[hramos]

Why is everything wrapped in a TouchableOpacity?

[opp100]

Generally is unnecessarily warp all in one touchable, but users tap on textInput will be much easier than tap the small icon on side. For example, if there are one drop down picker nested in this touchable, tap on textInput directly shows the picker, and when users select some option called other, Users can instantly input text in that textInput.

From my iPhone

On 13 Jul 2017, at 17:16, Héctor Ramos [e-mail] wrote:

Why is everything wrapped in a TouchableOpacity?

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub, or mute the thread.

[JLLLinn]

This is a regression. Confirm that downgrading works. This is needed for user's input that is not from keyboard (e.g. date picker) and consistency on style.

[c3098051]

I just upgraded from RN42 to RN46, and having the same error. Touchable with TextInput now doesn't trigger onPress.

[eladgel]

Happens also on 0.46.4

[mrtomhoward]

A temporary fix that works for me is to wrap the TextInput in a View with pointerEvents set to none.

That is:

<TouchableOpacity onPress={()=>{console.log('press')}}>
   <View pointerEvents='none'>
      <TextInput editable={false} />
   </View>
</TouchableOpacity>

This is working for me right now on RN 0.47.1.

[ilonashub]

Thanks for the fix! this doesn't work with TouchableWithoutFeedback tough

[bermann]

@ilonashub I'm having the same issue, did you find a way to solve it?

[ofilipowicz]

@bermann @ilonashub setting pointerEvents to box-only makes it work with TouchableWithoutFeedback

[PoliakovMaksym]

"react-native": "0.51.0"

TouchableWithoutFeedback onPress event still not working with TextInput inside.

But wrapping TextInput with View that has pointerEvent="box-only" still works. Thanks @mrtomhoward and @ofilipowicz

[hoscarcito]

@JLLLinn Hey Jiaxin you are saying that is it possible to open a Picker from a touchable??

[JLLLinn]

@hoscarcito Yes, you can use the touchable to trigger open a time picker

[izikandrw]

still happening on 0.54.4. @mrtomhoward workaround above still works (thanks!)

[Arshiamidos]

oh @mrtomhoward god bless you 👏👏

[tartas1995]

still happening on 0.55.3, workaround still works @mrtomhoward god bless you!

[nihp]

Same issue for me also. TextInput not seen inside the text box.

Selected test is shown as outside the text box.

[eliasrodeloso]

Still happening on RN0.55.4. @mrtomhoward workaround works just fine.

[jpamarohorta]

Still happening on RN 0.56

[numen31337]

The @mrtomhoward's solution works. Unfortunately, on the Android side, it prevents text fields from being editable (i.e. user can't place the cursor in the middle of a word).

[AlainGauthier]

when would that be solved?
I want to have the textinput editable and onPress triggered as well

WORKAROUND: remove touchable and use textinput onFocus and onBlur

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions.

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.