update value in textField unexpected behavior in ios due secureTextEntry

[IsmailParacha]

Environment

React Native Version: 0.71.14
react-native-paper Version: "^4.11.2"
Platform: iOS (device and simulator)

I am experiencing an issue with the TextInput component in react-native-paper on iOS devices and simulators. The problem arises when using the secureTextEntry prop to toggle password visibility in a password field.

Description

using react-native-paper I'm getting an issue in the iOS device and simulator, which is related to the text field secureTextEntry.
When I enter a value in a password field as you can check in the attached video. I toggle the showPassword to false and they already have some value then if I type to add some more characters in the password field then my password field value becomes null and initiates again but if my showpassword value is true mean secureTextEntry is true means the user will be able to check the password, and if I try to enter some more characters, it will work fine as expected. apart from that if I click in another field and back to the password field if the showpassword value is false then the password value becomes null and initiates again if the showpassword value is true then it works fine.

Steps to Reproduce

1. Enter a value in the password field.
2. Toggle showPassword to false (secureTextEntry is set to false).
3. Attempt to add more characters to the password field.
4. The password field value becomes null and resets.
5. Toggle showPassword to true (secureTextEntry is set to true).
6. Enter more characters; the field works as expected.
7. Click another field and then return to the password field.
8. If showPassword is false, the password value becomes null and resets.
9. If showPassword is true, it works fine.

Preview

Simulator.Screen.Recording.-.iPhone.15.-.2024-05-22.at.14.54.14.mp4

Code

import * as React from 'react'
import { TextInput } from 'react-native-paper'

const SignUpForm = () => {
  const [password, setPassword] = React.useState('')
  const [email, setEmail] = React.useState('')

  const [showPassword, setShowPassword] = React.useState(true)
  const refContainer = React.useRef(null)

  return (
    <>
      <TextInput value={email} label='Email' ref={refContainer} onChangeText={setEmail} />
      <TextInput
        value={password}
        label='Password'
        ref={refContainer}
        secureTextEntry={showPassword}
        onChangeText={setPassword}
        right={
          <TextInput.Icon
            name={showPassword ? 'eye' : 'eye-off'}
            onPress={() => {
              refContainer.current.focus()
              setShowPassword(!showPassword)
            }}
          />
        }
      />
    </>
  )
}

export default SignUpForm

Note

This issue only occurs on iOS. On Android, the password field works as expected.

[seb-zabielski]

Hey @IsmailParacha
it looks like default iOS behavior.
Can you check if the same behavior is with TextInput from react-native, or even run any other app having password field and check its behavior?

Here is a link to the native iOS question https://stackoverflow.com/questions/7305538/uitextfield-with-secure-entry-always-getting-cleared-before-editing

[IsmailParacha]

got it, thank you for the clarification @seb-zabielski