can not control cursor in TextInput after upgrading to v2.1.0 from 1.10.3

YaoHuiJi commented 2 years ago

Description

When you tap the TextInput, you can not control the cursor, but the soft keyboard keep showing and hiding. What I found is when you press down(don't lift) the TextInput will lose focus and the keyboard hides, and when you lift your finger, it will get focus and the keyboard shows up, as the video below shows

I downgrade to 1.10.3 and it works normal again, so I am pretty sure it's about new version.

Screenshots

https://user-images.githubusercontent.com/741543/147903328-8b195228-9138-47cb-861f-7dc57c50aa6e.MP4

I just keep tapping the TextInput.

Steps To Reproduce

upgrade this package to v2.1.0 from 1.10.3
tap any Textinput(from react-native-gesture-handler) component

Expected behavior

you can control the cursor or selection by tap/long press TextInput.

Actual behavior

it keep losing & getting focus when you tap it

Snack or minimal code example

just import Textinput from react-native-gesture-handler and use it .

Package versions

React: 17.0.2
React Native: 0.66.0
React Native Gesture Handler: 2.1.0
"@react-navigation/drawer": "^6.1.8",
"@react-navigation/elements": "^1.2.1",
"@react-navigation/native": "^6.0.6",
"@react-navigation/stack": "^6.0.11",

idrissakhi commented 2 years ago

A workaround is to deactivate the Gestures when the keyboard is opened.

j-piasecki commented 2 years ago

Hi! I've looked into it and I think I found the cause. In GH 2.0 state flow of Pan gesture has been slightly updated and now it transitions to the BEGAN state as soon as the finger touches the screen instead of right before activating, it seems that react-navigation/stack was relying on this behavior. I was able to solve the problem with this patch for @react-navigation/stack:

diff --git a/node_modules/@react-navigation/stack/src/views/Stack/Card.tsx b/node_modules/@react-navigation/stack/src/views/Stack/Card.tsx
index f20afb5..4ce3b31 100755
--- a/node_modules/@react-navigation/stack/src/views/Stack/Card.tsx
+++ b/node_modules/@react-navigation/stack/src/views/Stack/Card.tsx
@@ -272,7 +272,7 @@ export default class Card extends React.Component<Props> {
     } = this.props;

     switch (nativeEvent.state) {
-      case GestureState.BEGAN:
+      case GestureState.ACTIVE:
         this.isSwiping.setValue(TRUE);
         this.handleStartInteraction();
         onGestureBegin?.();

Could you check if it works in your case?

YaoHuiJi commented 2 years ago

hi @j-piasecki, it works!

software-mansion / react-native-gesture-handler