react-native icon indicating copy to clipboard operation
react-native copied to clipboard

Fix keyboard reload issue in TextInput component

Open AliRezaBeigy opened this issue 1 year ago • 1 comments

Summary:

This pull request addresses a keyboard mode resetting issue in the TextInput component that occurs when the value prop is programmatically updated. Previously, upon entering the first character in number mode, the keyboard would reload and revert to its default letter mode, disrupting the user input experience. This fix ensures that the keyboard remains in the expected mode, improving usability for scenarios that require sustained number input.

Changelog:

[GENERAL] [FIXED] - Prevent TextInput keyboard from resetting to default mode on value update.

Test Plan:

To verify the changes, the following steps were taken:

  1. Environment Setup: The test was conducted in a standard development environment using a React Native project where the TextInput component is extensively used.
  2. Test Execution:
    • A TextInput component was set up to accept numeric input with an initial state.
    • The value prop was programmatically updated to simulate user input.
    • Observed that the keyboard remains in numeric mode after the first character is entered and does not reset to the default alphanumeric keyboard.
  3. Result:
    • Before the change: The keyboard would switch back to letter mode after the first input when the value prop is updated.
    • After the change: The keyboard stays in number mode, reflecting the user's choice throughout the input session.
  4. Screenshots/Videos:

https://github.com/AliRezaBeigy/react-native/assets/46004092/b66837f2-8280-48ab-b32f-ca440d984c6b

https://github.com/AliRezaBeigy/react-native/assets/46004092/a37d2196-34e4-4085-aa8d-a32edc3549bc

These tests confirm that the code changes effectively prevent the keyboard from resetting when the value prop changes, maintaining the desired keyboard state across updates.

AliRezaBeigy avatar Apr 21 '24 05:04 AliRezaBeigy

i found this related issue on iOS too while the multiline props is true

https://github.com/facebook/react-native/assets/46004092/b238beab-e7dd-4655-8c55-7bd047014baf

https://github.com/facebook/react-native/assets/46004092/6205ee8b-afae-4973-be05-d9314c25031a

AliRezaBeigy avatar Apr 22 '24 21:04 AliRezaBeigy