React-native: [ios] "Choose My Own Password" not calling onChange

[johnkahn]

🐛 Bug Report

When you have an input with secureTextEntry the iOS Strong Password dialog pops up and it changes the text to the generated password. This works as expected and onChange is called, but when you press Choose My Own Password (picture below), it doesn't call onChange.

_I saw #21261 was closed because it didn't follow the format, and I couldn't find another issue created for this_

To Reproduce

1. Have a <TextInput /> with secureTextEntry on iOS 12+
   
   
   
   • It is also helpful to have console.log on onChange and onChangeText to see what is called
   
   
2. Tap it, this should bring up the Strong Password popup
3. Press Choose My Own Password
4. The text changes visually, but it does not call onChange or onChangeText

Expected Behavior

Pressing Choose My Own Password calls onChange and onChangeText with an empty string. That way we know that the user is no longer using the secure password.

Code Example

https://snack.expo.io/@johnkahn/choose-my-own-password

Cannot be run on the simulator, must be run from an iPhone iOS 12+ with Autofill Passwords turned on in the Settings.

Environment

  React Native Environment Info:
    System:
      OS: macOS 10.14.3
      CPU: (8) x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
      Memory: 41.62 MB / 16.00 GB
      Shell: 3.0.0 - /usr/local/bin/fish
    Binaries:
      Node: 11.10.1 - /usr/local/bin/node
      npm: 6.7.0 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
    IDEs:
      Xcode: 10.1/10B61 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.5.0 => 16.5.0
      react-native: https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz => 0.57.1

[bartolkaruza]

Thank you for the reproduction. We've confirmed the issue. The issue is marked as mid priority because we want to promote using these security features. A PR to fix this would be much appreciated!

[danilobuerger]

Maybe this can help for making a PR: https://stackoverflow.com/q/53566570/2525941
It seems like that the native delegate

- (BOOL)textField:(__unused UITextField *)textField shouldChangeCharactersInRange:(NSRange)range replacementString:(NSString *)string

is not being called when choosing "Choose My Own Password".

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[danilobuerger]

not stale.

[xAgustin93]

Is any of this problem still happening?

[danilobuerger]

yes

[declanelcocks]

Still happens for me. I've tried everything with my forms and still the strong password is a pain to deal with. The only solutions I've found that "work" so far are to add hidden inputs with secureTextEntry so that the app doesn't try and ask for a strong password anymore, but even that is still buggy.

This is also on just basic forms with username and password for textContentType...

[hoanghuy0604]

I have this problem too

[truongngodang]

I have this problem too +1

[Yvette14]

I have the same problem

[Luckfried]

I still have this problem, that none of the standard callbacks are called. Has anybody solved the problem with a work around?

[declanelcocks]

@Luckfried Using react-navigation, I added the following to my Input component:

<NavigationEvents
  onWillBlur={() => setDisableAuthInput(true)}
  onWillFocus={() => setDisableAuthInput(false)}
/>

It will disable any "auth" inputs and make them uneditable when navigating away from the page. I found that when there are several pages in the stack, the strong password will trigger changes on pages in the stack which are not visible.

[LucidNinja]

Have there been any updates on this? This is very problematic!

[LucidNinja]

@johnkahn did you find a workaround?

[johnkahn]

@LucidNinja I did not, unfortunately. Still an issue for me.

[LucidNinja]

@johnkahn - that's frustrating. I've tried looking into a work around or even writing a patch, but I'm no Objective-C genius!

[craig95]

It looks like this is an issue with iOS's UITextFieldDelegate. Found a similar issue on Stack Overflow for native iOS. It does not fire a change when 'Choose My Own Password' is pressed.

[donalbertico]

Faced the same problem.

I hopped over it by listen to onEndEdditing where used event.nativeEvent.text to set the current empty value

[JordanLauriol]

You can fix this problem with this solution:

// Add in your TextInput the props "onEndEditing"
<TextInput {...} onEndEditing={event => {
    if(event.nativeEvent.text.length === 0) {
        this.setState({
            password: ""
        });
  }
} />

Now, you can check if the password is empty before submit.

[LucidNinja]

Thanks @JordanLauriol - this workaround seems to have solved the problem!

[johnkahn]

Awesome! Glad there's a temporary solution. Thanks @donalbertico and @JordanLauriol for the workaround 👍

It's acceptable for my uses until there is an official fix in place

[BrandonMathis]

I feel this issue should be bumped up in priority.

Promoting the use of security-minded features is awesome but not calling the onChangeText with "" as the value when the user explicitly opts out of using iOS's password generation feature can result is major issues with application internal state.

If my Input field is updating component state when onChangeText is fired, I would expect this event to fire when the user opts out of the iOS secure password feature because the Input field goes from yellow with auto-generated password filled back to it's original styles with no text in the input.

Please reconsider the priority of this and respect Apple's implementation of auto-gen password! I have no way to clear out auto-generated password from component state even after the user explicitly opted out of using an auto-generated password.

[retyui]

Faced with the same issue [email protected]