Long-press to select and press to move cursor doesn't work on `position: 'absolute'` TextInput outside parent bounds on Android

[hsource]

Description

On Android, pressing within the TextInput to move the cursor and long-pressing to select/paste are handled by native (Java/Kotlin) components rather than React components. Due to a limitation of how native components capture touches, only touches that are within all parents' bounds will apply.

Notably, this means that a child view that uses position: 'absolute' that's positioned outside of a parent, then you won't be able to press to move the cursor or long-press to select/paste.

Workaround

If you have a TextInput where you want to allow moving the cursor or long-pressing, make sure the child is within the parents' dimensions. You may be able to use pointerEvents: 'box-none' to do this too.

See the Snacks below in the repro steps for a workaround.

How I debugged this

I looked into this using the debugger on Android by setting a breakpoint within the ReactEditText.class (decompiled) onSelectionChanged call.

Native touches propagate down via dispatchTouchEvent, which is different from the handleTouchEvent in the JSTouchDispatcher that handles taps on Buttons and React Native views. dispatchTouchEvent checks isTransformedTouchPointInView, which only propagates touches that are within the bounds.

This behavior is not overrideable, as the pointInView function it calls is final.

Potential fixes

This seems hard to fix without significantly changing the ReactEditText.

Here are 2 options, which both seem hard:

1. Don't rely on the native code for long-press/tap to select. This seems very hard
2. Have all position: 'overflow' views actually span the entire window, and only filter down using our own custom logic later

React Native Version

0.71.3

Steps to reproduce

To reproduce:

1. Open this Expo Snack on an Android device
2. Try to long-press the text

To see the workaround version:

1. Open this Expo Snack on an Android device
2. Try to long-press the text

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

https://snack.expo.dev/@hsource/558726

[github-actions[bot]]

:warning:

Newer Version of React Native is Available!

:information_source:

You are on a supported minor version, but it looks like there's a newer patch available. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

[github-actions[bot]]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 7 days with no activity.

[github-actions[bot]]

This issue was closed because it has been stalled for 7 days with no activity.