TextInput cursor placement still not correct on 0.64 when modifying value prop?

[creambyemute]

Environment

Run the following in your terminal and copy the results here.

1. npx react-native --version: 5.0.1-alpha2
2. npx react-native info:

System:
    OS: Windows 10 10.0.19042
    CPU: (12) x64 AMD Ryzen 5 5600X 6-Core Processor
    Memory: 24.86 GB / 31.95 GB
  Binaries:
    Node: 14.16.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 6.14.11 - C:\Program Files\nodejs\npm.CMD
    Watchman: Not Found
  SDKs:
    Android SDK:
      API Levels: 28, 29, 30
      Build Tools: 29.0.0, 29.0.1, 29.0.2, 29.0.3, 30.0.0, 30.0.1, 30.0.2, 30.0.3
      System Images: android-28 | Google APIs Intel x86 Atom, android-29 | Google APIs Intel x86 Atom, android-30 | Google APIs Intel x86 Atom
      Android NDK: Not Found
    Windows SDK:
      AllowDevelopmentWithoutDevLicense: Enabled
      AllowAllTrustedApps: Enabled
      Versions: 10.0.18362.0, 10.0.19041.0
  IDEs:
    Android Studio: Version  4.1.0.0 AI-201.8743.12.41.7042882
    Visual Studio: 16.9.31025.194 (Visual Studio Community 2019)
  Languages:
    Java: 1.8.0_282 - C:\Program Files\OpenJDK\openjdk-8u282-b08\bin\javac.EXE
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.1 => 17.0.1
    react-native: 0.64.0 => 0.64.0
    react-native-windows: ^0.64.0-0 => 0.64.3
  npmGlobalPackages:
    *react-native*: Not Found

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

1. Use a TextInput like:

<TextInputRN
    value={props.value ? IBAN.printFormat(props.value, " ") : props.value}
    keyboardType={"default"}
    returnKeyType={"next"}
    onChangeText={onChange}
    onSubmitEditing={onSubmit}
    autoCapitalize={"characters"}
/>

2. Write into the field. As soon as an space is added (by IBAN.printformat above), the cursor position is incorrect (-1 where it should be).

Expected Results

The Text to be IBAN-Like formatted CH12 3456 7890 1234 5678 9 when writing CH1234567890123456789

In general, I haven't found a sane way of formatting/modifying TextInput values. Cursor always jumps somewhere.

[rozele]

This recent PR modified the way TextInput cursor positioning was handled when the text was modified by JS: #7285

It's been merged and perhaps is a good candidate to cherry pick back to 0.64. Thoughts @chrisglein ?

Please note it changes the behavior to match the behavior of an HTML input element: https://html.spec.whatwg.org/multipage/input.html#dom-input-value-value. If the TextInput value length changes due to JS state change when the cursor is not at the end of the text, the cursor will jump to the end (same at HTML input).

[creambyemute]

Aah, I think there were 2 PR's and one is already included in 0.64 which improved the cursor shift quite a bit (as long as length seems to stay equal).

I actually thought the PR you linked above is already included. Makes sense now. I'll wait for that one to either be cherry-picked to 0.64 or for the 0.65 release 👍

Edit: A workaround on the JS-Side for now is to do the formatting onEndEditing/onSubmitEditing instead of on-the-fly. Like this:

<TextInput
    value={value} // Don't do Formatting here until solved
    keyboardType={"default"}
    returnKeyType={"next"}
    onChangeText={onChange} // Don't do formatting here until solved
    onSubmitEditing={onSubmitIban} // Do formatting here
    onEndEditing={onSubmitIban} // Do formatting here
    autoCapitalize={"characters"}
/>

[rozele]

Re-reading the issue, the PR mentioned above should fix for your specific use case.

[chrisglein]

@rectified95 can you backport this change to 0.64?