TextInput with SecureEntry sometimes highlights yellow with "Strong Password" text, and becomes unuseable #21911
Comments
react-native-bot
added
Component: TextInput
|
I got the same issue, but I can't reproduce it consistently: iOS 12.1 Simulator on RN 0.56
Code: <FormInput
accessibilityLabel="password"
autoCapitalize="none"
autoCorrect={false}
clearButtonMode="while-editing"
editable={!this.props.loading}
enablesReturnKeyAutomatically
inputStyle={styles.input}
onBlur={this._onBlurPass}
onChangeText={this.getHandler('password')}
onFocus={this._onFocusPass}
onSubmitEditing={this.onLogin}
placeholder="password"
ref={this.PwdInput}
returnKeyType="go"
secureTextEntry={!isPasswordVisible}
testID="PasswordField"
textContentType="password"
value={password}
/>I'm using |
|
Same issue for me. The iOS 12 password autogeneration only fills in the first field, then if you attempt to click on the text input after it has been filled, the application crashes. Crash information I have is Associated iOS information on autofill protocols: https://developer.apple.com/documentation/security/password_autofill/about_the_password_autofill_workflow |
|
Same issue for me. The iOS 12 shceme debug is ok,but shceme set release ,app crash. crash log: Exception Type: EXC_BAD_ACCESS (SIGBUS) Termination Signal: Bus error: 10 Thread 0 name: Dispatch queue: com.apple.main-thread |
|
Same issue for me. and can't input. Is there any solution？ |
|
It doesn't look to me like If I understand correctly, it's supposed to also change the keyboard context (like to a number pad for phone number, for example) but this doesn't happen. It also makes no suggestions in any example I've tried, including the OP's snack. |
|
@methodbox I believe the prop type you're thinking of is
|
|
@nar213 Please read the following from the docs: https://facebook.github.io/react-native/docs/textinput#textcontenttype I’m aware keyboardType is what actually changes the keyboard; my description above is incorrect. But password is a valid value for textContentType and neither it nor any of the other values actually work. |
|
It works for me, when I select the field suggestions appear at the top of the software keyboard. react-native/Libraries/Components/TextInput/TextInput.js Lines 192 to 221 in 11df0ea react-native/Libraries/Text/TextInput/RCTBaseTextInputView.m Lines 202 to 211 in f307ac7 |
|
@nar213 I’m not sure what you’re on about - RN has already acknowledged this bug; I was stating it doesn’t appear this particular issue is quite such an edge case. Review the bug here if you want: If you read that it looks like to me that the RN team has acknowledged this is a bug and it’s due to some naming scheme mismatch. Let me know if I’m misinterpreting that. |
|
The issue reported in the original post is still present in 0.59.4 and iOS 12.2. From my understanding, the crash happens when using textContentType password / newPassword and setting selectTextOnFocus. This is consistent with the stack traces, which show that the crash occurs on textInputDidBeginEditing -> [self.backedTextInputView selectAll:nil]. The same error occurs though if you don't set textContentType or you explicitly set to none. It seems like something is trying to infer that the input field is a password from other properties, probably secureTextEntry To reproduce the bug you first tap on a password / newPassword field, iOS will generate a password for it and then attempt to focus again that same field. |
|
There is something different in your description from the original issue and that is the fact that iOS can now generate passwords as part of the built-in password manager - that didn’t exist at the time the issue was created. I’m curious if that’s related and maybe a separate issue. |
|
I think it's the same issue that was originally reported. that UI shown in the OP seems like the one for iOS new password autofill. it's true that we didn't have the option to specify A minimal example is This will consistently crash once you try to re-focus an autofilled field. I tried to debug and it seems to generate an infinite loop of calls, possibly because a secureTextEntry cannot be selected and we instruct it to do so, but tbh my native development skills and my understanding of native iOS internals are quite limited. |
From my experience also, I believe that's true. |
|
Just ran into this issue while developing an app, it randomly appear and now I cannot input anything in the field. Is there any workaround available? |
|
I'm also experiencing this bug. "react-native": "0.56.0", |
|
same issue http://prntscr.com/oe6j0v |
|
I think I've managed to consistently reproduce this problem: https://snack.expo.io/@karvaporo/788f3f The situation might look rather contrived, but this is essentially what happens in our app where we have signup and login forms housed in separate tabs of a tab view. |
|
I am seeing the same thing. I will add that in my case the fields do not get blocked unless I use the next/done feature. Which is tough since typically password is last for a signup/signin form. Edit: adding blurOnSubmit={false} seems to prevent this behavior |
|
Hi there, I'm having the same issue on RN v61.4. Is there any fix? I have tried :
Also, this seemed to happen at a higher rate when having two textInput one over the other both having secureTextEntry enabled like in a password+confirm Password configuration. Finally, this is really intermittent which further makes me wonder why such a thing happens in the first place... |
|
@iamgerardm my man. Not a permanent fix but prevents the bug, thanks a lot :) |
|
@HeavenMin Your solution works for me as well. None of the earlier ones did. RN 63, ios 14.2 |
|
@HeavenMin It worked for the first time. But it stopped working again. |
|
this could be only a temporary solution but changing |
|
Apple introduced this new feature ('passwordRules') in iOS 12 during WWDC18. Due to this new change my RN project's password input field was working abnormally, and strange behavior arises as mostly people are facing above. When using textContentType as newPassword on iOS we can also let the OS know the minimum requirements of the password so that it can generate one that will satisfy them. For more info just read about these 2 attributes from React Native's TextInput documentation. |
Do you know any way to recreate this but from an iOS environment (i.e. iPhone 12)? |
|
I'm having trouble with this one, is it now a native solution? |
|
I am having the same issue with RN 0.64.0 and iOS 14.4. Below is my observations. Scenario 1<TextInput secureTextEntry={true}> // input1
<TextInput secureTextEntry={true}> // input2
Scenario 2// some other text input
<TextInput secureTextEntry={true}> // input1With only one secure text, or if the secure text is the last text input, mixing physical and virtual keyboard does not cause the yellow box to show up. However, if Temporary WorkaroundSince a single or end-dwelling secure text input does not cause trouble, it seems to me that the problem requires some sort of propagation to manifest. So I jam an empty TextInput between the two secure ones, as shown below, and so far it works as expected, i.e. mixing physical and virtual keyboard does not cause the yellow box to show up. <TextInput secureTextEntry={true}> // input1
<TextInput /> // a dummy that jammed in between two secure texts
<TextInput secureTextEntry={true}> // input2One thing to note is that if the jammed TextInput has height set to 0, it does not work. Thus, I set mine to 0.1, which cannot be detected on the screen, yet solves the problem so far. |
|
What worked for me is to leave my TextInput props as they are and disable the strong password feature from the settings. Settings -> Passwords -> Type any password to unlock ->Turn On AutoFill Passwords and turn it Off again. |
|
My issue was with keyboardType="email-address" when user enter saved email. So, I added in 'android/app/src/main/res/values/styles.xml'. |
|
I had the very same issue, the inputs are not responsive when password is suggested and the bug is hard to reproduce. My solution is: try it on a real device. The dialog that pops up requires you to select to either use the suggested password or use your own. In the meantime inputs are not responding. The same does not appear on the simulator, so that for me explains the issue.
|
|
Same issue here. |
|
What is the status of this issue? Has any progress been made on resolving it? Will it be fixed in an upcoming version of react native? |
|
+1 |
|
RN: 0.68, iOS:15.4 The problem still persists. |
|
RN: 0.67 as well, still happening |
|
Yep. RN 0.68. still broken. I have tried all the solutions above & nothing works. Probably going to make a custom secure text entry if this isn't resolved. Edit:
|
|
I faced the same issue when I wrote tests for Detox. In my case, the yellow highlight appears when |
|
Is there any plan to resolve this? Seems like this issue has existed for quite some time. |
This worked for me recently, you may also need to go into 'security recommendations' and switch 'Detect Compromised Passwords' on and off again. Source: https://stackoverflow.com/a/65364038/13740590 |
No freaking way... This was my issue too. I changed a testID from |
|
In my case I have two password input fields for entering the same password twice. <TextInput
textContentType="username"
autoComplete="username-new"
value={username}
style={{ height: 0.1, width: 0.1, overflow: "hidden" }}
/> |
|
I feel this should be pretty high priority by the react native team to fix since it can render apps literally unusable on one platform unexpectedly... just my opinion... ideally this behavior is entirely opt in and never happens unless the developer asks for it. Might be an OS limitation though |
|
My issue is highly related to the issues here. I'm using Yup and react-hook-form (it's probably unrelated). By using a double input password/confirm password, the same issue as everybody: the strong password popup shows, and here starts super weird behaviors. For me:
After far too much time trying different interesting workarounds, I went to a superb fix: removing the confirm input to make the app work decently. Like many people here, I think the issue should be one of the top priorities... |
This worked for me... |
|
*Edit: I thought this issue was related to detox and end to end testing when I commented; that's the only time I've seen this situation occur. Mentioning this and leaving my comment as it might provide some extra insight into why the problem occurs. If this is happening to you and you have 2 inputs, i.e. It shouldn't be necessary to go last to first on all inputs but test it out and see where it helps. |
|
@dustinyoste can you reproduce this issue on a real device?
It seems that iOS suggests a password for those fields, the functionality needs to be disabled by the user. When testing with the simulator, the functionality is not available. Thanks |
and others
Environment
React Native Environment Info:
System:
OS: macOS 10.14
CPU: x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
Memory: 54.86 MB / 16.00 GB
Shell: 5.3 - /bin/zsh
Binaries:
Node: 8.12.0 - ~/.nvm/versions/node/v8.12.0/bin/node
Yarn: 1.9.4 - ~/.yarn/bin/yarn
npm: 6.4.1 - ~/.nvm/versions/node/v8.12.0/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 12.0, macOS 10.14, tvOS 12.0, watchOS 5.0
IDEs:
Xcode: 10.0/10A255 - /usr/bin/xcodebuild
npmPackages:
react: 16.6.0-alpha.8af6728 => 16.6.0-alpha.8af6728
react-native: ^0.57.3 => 0.57.3
npmGlobalPackages:
react-native-cli: 2.0.1
Description
I haven't been able to identify why this occurs, but sometimes users experience a yellow cover over the textField, with a "Strong Password" text on the right, and something cut off on the left. I can still tap the textInput and "Type" but the value does not change within the textInput.
(The red x, and warning text is my own)
I've tried adding, and removing
textContentType="password", but this issue still persists.The text was updated successfully, but these errors were encountered: