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)

[RigottiG]

I'm facing the same issue here

[stale]

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 a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[PaoloGuimalan]

Hey guys I've fixed mine and this might fix yours! The thing that is happening when you position a view as absolute, the view automatically being placed at the bottom of Z index placement. So basically react native uses the html concepts about z Index. We cannot focus the textinputs and touchables within the absolute view because when we click it we are clicking the View which positioned in the same place the absolute view is at. So we need to elevate the absolute view by putting "zIndex: 1" or "zIndex: 1000", depending on how many elements your absolute view overlapped. So basically this not a bug, it's just a plain old html concept we missed.

[hsource]

The root cause of this issue is #37181

I included some workarounds in that issue too