[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]

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

[aqwxcvb]

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]

[stale]

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.

[johnkahn]

Not stale, it's still an issue. There is a workaround, but will still cause issues out of the box.

[adrienzagar]

Hey! I am facing the same issue. I want to disable my button if the user still not have enter password. Unfortunately, when user opt for "choose its own password", the Apple strong passwords are stille in the state of my application.

[stale]

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

[pablogdcr]

I'm still having this issue with react-native 0.66.4

[Voidozzer]

RN 0.68.1 problem still exists

[zfrankdesign]

I am also having this issue RN 0.64

[tychobrouwer]

Issue still is present on RN 0.69. Thanks @JordanLauriol for the temporary fix.

[steza]

Issue still exists! Why this is not treated as higher priority? RN 0.69.5

[robezerra]

I am also facing this issue RN 0.70.8

[topi-identio]

The workaround with onEndEditing kind of works, but if the user manages to press the form submit button before focusing on anything else (i.e. the password input being the last field of the form and the user not pressing the screen to close the on-screen keyboard) the onEndEditing function will not trigger in time, causing the submit function to still have the previous state that includes the password provided by autofill.

[devinkg]

I am also having this issue RN 0.68.2

[MiguelAngelMC]

I have the same issue, please fix it :((

[igorpimentel23]

I'm also having this problem RN 0.72.6.

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[react-native-bot]

This issue was closed because it has been stalled for 7 days with no activity.

[kachmashk]

Still happens at 0.73.2.
^This workaround from @aqwxcvb works fine thou.

[AndyMeagher]

Not stale, please reopen