On Android, TextInputs within a `position: absolute` view that's inside another view with onLayout can't be focused

[hsource]

Please provide all the information requested. Issues that do not follow this format are likely to stall.

Description

Given a hierarchy of views:

1. <View> with onLayout prop
2. <View> that has position: 'absolute' style
3. A TextInput

Text inside the TextInput can't be selected. Removing the first view's onLayout prop or the second view's position: 'absolute' will allow text in the TextInput to be selected.

React Native version:

v0.62.2

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

1. Render inside a component the following:

import * as React from 'react';
import { TextInput, View, Text } from 'react-native';

export default function App() {
  return (
    <View style={{ flex: 1 }}>
      {
        // Remove the onLayout for the text to become selectable
      }
      <View onLayout={() => {}}>
        <View
          style={{
            position: 'absolute',
            width: '100%',
            top: 50,
            paddingHorizontal: 8,
          }}
        >
          <Text style={{ marginBottom: 10 }} wrap>
            The following text should be selectable. For some reason, it's not
            selectable on Android when placed inside the original
            KeyboardAvoidingView or any View with an onLayout callback.
          </Text>
          <TextInput defaultValue="Try selecting this text" />
        </View>
      </View>
    </View>
  );
}

2. On Android, try to select text inside the TextInput

Expected Results

Describe what you expected to happen.

The text should be selected

Snack, code example, screenshot, or link to a repository:

https://snack.expo.io/@harrytravelchime/react-native-issue-29308

[Shuo-Mr]

I also encountered a similar problem. When the view is absolutely positioned, internal events cannot be triggered, but positioning can be triggered to cover subsequent events, such as Scrollview's scroll event. I think it may be due to hierarchy, but I can't make a mask like thing on the outer layer of the positioned view, because it will affect the layout of peers. I hope someone can help me.

So your problem here, I think, is due to the absolute positioning.

[farshed]

Touchables inside absolutely positioned View not working either

[safaiyeh]

Interesting bug, I was able to see this in the snack. I've seen some PRs and issues relating to hierarchy of view elements. I wonder if one of those would help (don't have a list of them handy on me right now)

[anhquan291]

Same problem here. It works just fine on iOS but Android.

[fabOnReact]

from quick troubleshooting I notice that onTouchEvent is not triggered when we use absolute position

react-native/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java

Line 202 in fb974ce

public boolean onTouchEvent(MotionEvent ev) {

I troubleshooted something similar #27333 (comment) and #27333 (comment) but in this case I think this is an actual bug.

Also many information about this issue are included in #29911 #25441 #28694

Most of the time this can be fixed using react-native-gesture-handler component, but in this case it is not possible. I further investigate.

[ella33]

Same problem here. TextInput does not get focused and the buttons aren't pressable on Android if it's inside an absolutely positioned View and it happens even without onLayout. Eg.

  <View style={{ position: 'absolute', bottom: 0, paddingVertical: 10, paddingHorizontal: 15 }}>
      <Pressable onPress={() => {}}>
        <PlusIcon />
      </Pressable>

      <TextInput ref={inputRef} style={styles.newMessageInput} multiline={true} onChangeText={onMessageChange} />

      <Pressable onPress={sendMessage}>
        <SendIcon />
      </Pressable>
    </View>

[fabOnReact]

https://reactnative.dev/docs/touchablewithoutfeedback#hitslop

The touch area never extends past the parent view bounds.

The parent is absolute positioned and has computed height of 0, does not allow you to click/press on the childs.
I fixed the example by giving height parent > height of child, click the links below for a more detailed explanation:

CLICK TO OPEN - CODE SNIPPET

class RewriteExampleInvalidCharacters extends React.Component {
  render() {
    return (
      <View
        nativeID="1"
        style={{backgroundColor: 'yellow', height: 150}}
        onLayout={() => {}}>
        <View
          nativeID="2"
          style={{
            position: 'absolute',
            top: 0,
            bottom: 0,
            left: 0,
            right: 0,
            zIndex: 2,
            height: 100,
            backgroundColor: 'red',
          }}>
          <TextInput nativeID="3" defaultValue="Try selecting this text" />
        </View>
      </View>
    );
  }
}

CLICK TO OPEN - REACTANDROID JAVA METHOD ANALYSIS

In the example included in this issue child.getBottom() and child.getTop() are equal, because the element with absolute positioning (nativeID="1" in my example) has height = 0 and the method returns false.

react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/TouchTargetHelper.java

Lines 178 to 180 in 0060b5d

	&& (localY >= 0 && localY < (child.getBottom() - child.getTop()))) {
	outLocalPoint.set(localX, localY);
	return true;

CLICK TO OPEN TESTS RESULTS - VIDEO CLICKING ON TEXTINPUT

height of parent > height of child - TextInput text is selectable
2021-03-08.16-11-30.mp4

CLICK TO OPEN - VIDEO EXPLANATION OF THE REASON

In the example below the child.getBottom and child.getTop are equal, meaning the height of container is 0.
The view with nativeID="1" has height = 0, in java getTop returns 330 and getBottom returns 330 for this native view. The method below returns false and his childs are not touchable

react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/TouchTargetHelper.java

Lines 178 to 180 in 0060b5d

	&& (localY >= 0 && localY < (child.getBottom() - child.getTop()))) {
	outLocalPoint.set(localX, localY);
	return true;

      <View
        nativeID="1"
        style={{backgroundColor: 'yellow'}}
        onLayout={() => {}}>
        <View
          nativeID="2"
          style={{
            position: 'absolute',
            top: 0,
            bottom: 0,
            left: 0,
            right: 0,
            zIndex: 2,
            // height: 100,
            backgroundColor: 'red',
          }}>
          <TextInput nativeID="3" defaultValue="Try selecting this text" />
        </View>
      </View>

parent height is 0
2021-03-08.16-44-08.mp4

In the example below the child.getBottom and child.getTop are not equal, meaning the height of container is > 0.
The view with nativeID="1" has height = 150, in java getTop returns 330 and getBottom returns 780 for this native view. The method below returns true and his childs are touchable

react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/TouchTargetHelper.java

Lines 178 to 180 in 0060b5d

	&& (localY >= 0 && localY < (child.getBottom() - child.getTop()))) {
	outLocalPoint.set(localX, localY);
	return true;

      <View
        nativeID="1"
        style={{backgroundColor: 'yellow', height: 150}}
        onLayout={() => {}}>
        <View
          nativeID="2"
          style={{
            position: 'absolute',
            top: 0,
            bottom: 0,
            left: 0,
            right: 0,
            zIndex: 2,
            // height: 100,
            backgroundColor: 'red',
          }}>
          <TextInput nativeID="3" defaultValue="Try selecting this text" />
        </View>
      </View>

parent View height > 0
2021-03-08.16-44-44.mp4

Related #25441 #28694 #27333 (comment)