Cursor ignoring zindex

[jbcullis]

Environment

react-native 0.64.0:
npm ls react-native-macos: 0.64.13
node: 17.0.1
npm: 8.1.0
yarn: N/A
xcodebuild: 13A1030d

Steps to reproduce the bug

If you have a popup covering a TextInput, if you hover over the overlayed TextInput it will show the text cursor.

Expected Behavior

Cursor should be based on top layer.

Actual Behavior

Text cursor shows for when hovering over a TextInput underneath the popup.

Reproducible Demo

https://github.com/jbcullis/test

Additional context

Doesn't matter about opacity, this also occurs when full opacity: 1 views are covering the TextInput.

Further, clicking a button that sits over the top of a TextInput will focus the TextInput.
Temporary workaround is to set editable to false on the TextInput when the UI container the TextInput is in the background.

[HeyImChris]

Could you please attach some sample code we can repro this with?

[jbcullis]

@HeyImChris I've created a demo with an absolute opaque view overlaying a TextInput and you'll see the cursor will change when you hover over the TextInput, and you can select and type into it.

It seems like that the TextInput control is always on top in terms of zIndex.

[HeyImChris]

@jbcullis How are you displaying the popover in your test app? I cloned it and right clicked to get a contextual menu to show over the TextInput control and the cursor is the correct type in that scenario even when the menu is over a TextInput. Contextual Menu != Popover though so want to make sure I'm testing this with the same controls as you.

[jbcullis]

@HeyImChris the issue I’m having is that I can still select a text input even when there is a view overlayed over the top of it.
Same issue with a scroll view, if you create a full screen view over the top of a scroll view, you can still scroll.

[HeyImChris]

@jbcullis Thanks, I'm able to repro your issue. Could you try testing it on an iOS app just with a simple text input and View over top of it? I'm curious if this is a macOS bug or just a generic RCTView issue.

[jbcullis]

@HeyImChris issue seems limited to macOS. It's fine on iOS, Android, and Windows.

[jbcullis]

@HeyImChris I don't have any experience with core RN but I'm hoping to learn so I started poking around over the weekend to try an identify the cause. Could it be an issue with catalyst cause I've seen some weird cursor behavior in the iOS simulator before.

This issue is the most pressing for us as it's causing users to think they can't press buttons if there is a textinput below the overlayed view.