Can't prevent default input in TextInput in controlled component

[jcubic]

Description

The comment in #24585 suggested creating another issue for this. It's also similar to #23578.

The problem is that you can't prevent the default behavior of controlled TextInput in ReactNative.

I've asked this on StackOverflow: How to prevent adding typed keys into controlled TextInput in React-Native?. But looking at similar issues this is a bug (or missing feature) in ReactNative.

React Native Version

0.71.8

Output of npx react-native info

info Fetching system and libraries information...
System:
OS: Linux 5.19 Ubuntu 22.04.2 LTS 22.04.2 LTS (Jammy Jellyfish)
CPU: (8) x64 Intel(R) Core(TM) i5-10210U CPU @ 1.60GHz
Memory: 19.22 GB / 30.98 GB
Shell: 5.1.16 - /bin/bash
Binaries:
Node: 20.3.0 - ~/.nvm/versions/node/v20.3.0/bin/node
Yarn: 1.22.19 - ~/.nvm/versions/node/v20.3.0/bin/yarn
npm: 9.6.7 - ~/.nvm/versions/node/v20.3.0/bin/npm
Watchman: Not Found
SDKs:
Android SDK: Not Found
IDEs:
Android Studio: Not Found
Languages:
Java: 1.8.0_362 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 18.2.0 => 18.2.0
react-native: 0.71.8 => 0.71.8
npmGlobalPackages:
react-native: Not Found
info React Native v0.72.1 is now available (your project is running on v0.71.8).
info Changelog: https://github.com/facebook/react-native/releases/tag/v0.72.1
info Diff: https://react-native-community.github.io/upgrade-helper/?from=0.71.8
info For more info, check out "https://reactnative.dev/docs/upgrading".

Steps to reproduce

Type the number into the input field with the code below. The code works on the Expo playground but fails on Android Emulator (didn't tested on a real device).

From the demo I expect the input to not change.

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

const ControlledComponent = () => {
  const [state, setState] = useState('0.00');
  const cursor = 1;
  return (
    <TextInput
      ref={ref}
      autoFocus
      onKeyPress={() => { /* empty */ }}
      selection={{start: cursor, end: cursor}}
      value={state}
      keyboardType="numeric"
    />
  );
};

event.preventDefault() also doesn't work:

const ControlledComponent = () => {
  const [state, setState] = useState('0.00');
  const cursor = 1;
  return (
    <TextInput
      ref={ref}
      autoFocus
      onKeyPress={(e) => { e.preventDefault() }}
      selection={{start: cursor, end: cursor}}
      value={state}
      keyboardType="numeric"
    />
  );
};

[github-actions]

⚠️

Newer Version of React Native is Available!

ℹ️

You are on a supported minor version, but it looks like there's a newer patch available - 0.71.11. 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.

[jcubic]

I'm using Expo. I'm not sure how to update react-native. Got an error when I do:

Some dependencies are incompatible with the installed Expo version:
  react-native@0.71.11 - expected version: 0.71.8
Your project may not work correctly until you install the correct versions of the packages.
Install individual packages by running npx expo install react-native@0.71.8

[cortinico]

I'm using Expo. I'm not sure how to update react-native. Got an error when I do:

Can you try on a non-Expo project and verify that the issue is happening also there?

[jcubic]

Sure will try to create a demo, but it may take a while since I never used raw react-native.

[jcubic]

I can confirm the same happen in React-Native without expo, tested on 0.72.1

$ npx react-native info
info Fetching system and libraries information...
System:
  OS: Linux 6.3 Fedora Linux 38 (Xfce)
  CPU: (8) x64 Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz
  Memory: 6.23 GB / 15.27 GB
  Shell:
    version: 5.2.15
    path: /bin/bash
Binaries:
  Node:
    version: 18.16.0
    path: ~/.nvm/versions/node/v18.16.0/bin/node
  Yarn:
    version: 1.22.19
    path: ~/.nvm/versions/node/v18.16.0/bin/yarn
  npm:
    version: 9.5.1
    path: ~/.nvm/versions/node/v18.16.0/bin/npm
  Watchman: Not Found
SDKs:
  Android SDK: Not Found
IDEs:
  Android Studio: Not Found
Languages:
  Java:
    version: 17.0.7
    path: /usr/bin/javac
  Ruby:
    version: 3.2.2
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.72.1
    wanted: 0.72.1
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

[cortinico]

I can confirm the same happen in React-Native without expo, tested on 0.72.1

Can you also share a repro?

[github-actions]

⚠️	Missing Reproducible Example
ℹ️	It looks like your issue is missing a reproducible example. Please provide either: If your bug is UI related: a Snack If your bug is build/update related: use our Reproducer Template

[jcubic]

Sure, it's the default app created with react-native with the component in the original post.

But here is it: https://github.com/jcubic/react-native-bug

[vision72]

Hi @jcubic, & @cortinico, this looks like a good first contribution, can I pick this up, and debug more?

[cortinico]

Hi @jcubic, & @cortinico, this looks like a good first contribution, can I pick this up, and debug more?

Please do 🙏

[jcubic]

Any tips on where I should look in the code?

[vision72]

Hi!
I am just a newbie and learning the core react-native aspects, It could be using an incorrect approach for this, but here is something that I found.

The SyntheticEvents class prototype looks good, in terms of handling the event.stopPropagation callback and the event.preventDefault callback.

The conditions excel and I took a look around the native dispatchKeyEventOrEnqueue callback from the ReactEditTextInputConnectionWrapper class, under the setComposingText function overwritten from the InputConnectionWrapper class which I am currently debugging and seems to be the culprit, but I need some time going around this, and to be able to confirm the exact changes needed.

It seems that there is a condition on the setComposingText function:

boolean cursorMovedBackwardsOrAtBeginningOfInput =
        (currentSelectionStart < previousSelectionStart) || currentSelectionStart <= 0; 

And we might have to add in a similar Boolean condition for a preventDefault/stopPropagation scenario, which would remove the bubbling of the key input, and thereby overwrite the nativeEvent property, and achieve event.stopPropagation behavior.

Again, this is something from the perspective of a beginner community contributor, I could be wrong.
Inputs appreciated and welcomed, Thanks

CC: @cortinico @jcubic @joshjhargreaves

[jcubic]

@vision72 did you try to make your change and test locally if it works? Experimentation is the best way to test if you're right.

Now I have more free time and I will also try to debug this, unless you will solve this first.
It was really annoying that I needed to implement my own keyboard to get rid of this bug, I'm not in that project anymore but I can see if I can fix this issue.