gluestack / gluestack-ui

React & React Native Components & Patterns (copy-paste components & patterns crafted with Tailwind CSS (NativeWind))
https://gluestack.io/
MIT License
2.32k stars 110 forks source link

Password input value resets when toggling visibility on iOS #2302

Open yanoyuki opened 1 month ago

yanoyuki commented 1 month ago

Description

When toggling the visibility of a password input field using an eye icon, the input value is reset. This issue occurs when switching between type="password" and type="text".

CodeSandbox/Snack link

https://snack.expo.dev/@y.yano/gluestack-ui?platform=ios

Steps to reproduce

Steps to Reproduce

  1. The initial type of the password input field is "password".
  2. Enter a password.
  3. Next, click the eye icon to change the type to "text".
  4. Continue entering the password.
  5. Click the eye icon again to change the type back to "password".
  6. Enter one more character, and all previous input is reset, requiring you to start typing from the beginning.

https://github.com/user-attachments/assets/bcb257b6-7254-4aa5-849b-803164945414

gluestack-ui Version

    "@gluestack-ui/config": "^1.1.19",
    "@gluestack-ui/themed": "^1.1.38",
    "@gluestack-style/react": "^1.0.57"

Platform

Other Platform

No response

Additional Information

This issue occurs only on iOS and does not happen on Android or Web.

The sample code used in Snack is almost identical to the example code provided on the following page: https://gluestack.io/ui/docs/components/forms/input

makkarMeenu commented 1 month ago

@yanoyuki This is default react-native TextInput behaviour. You can check here in this expo snack. https://snack.expo.dev/bhK1tUd4IXwXu-U0Pof_N?platform=ios

yanoyuki commented 1 month ago

Thank you for your response.

So, this is not an issue with Gluestack but rather a problem with React Native and iOS.

Is there any workaround to address this iOS behavior?

makkarMeenu commented 1 month ago

@yanoyuki You may be want to check this out https://github.com/facebook/react-native/issues/35668

yanoyuki commented 1 month ago

@makkarMeenu

As mentioned stack overflow,

textField.clearsOnBeginEditing = NO;

I understand that this resolves the issue, but it seems there is no way to directly avoid this from React Native without touching the native code.