TextInput with SecureEntry sometimes highlights yellow with "Strong Password" text, and becomes unuseable

[VicFrolov]

• Review the documentation: https://facebook.github.io/react-native
• Search for existing issues: https://github.com/facebook/react-native/issues
• Use the latest React Native release: https://github.com/facebook/react-native/releases

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.

[gianpaj]

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 <FormInput> from react-native-elements

[narobertson42]

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.

<TextInput
  name="password"
  placeholder="Password"
  secureTextEntry={true}
  textContentType={'newPassword'}
/>
<TextInput
  name="confirmPassword"
  placeholder="Confirm Password"
  secureTextEntry={true}
  textContentType={'newPassword'}
/>

Crash information I have is

Crashed: com.apple.main-thread
EXC_BAD_ACCESS KERN_PROTECTION_FAILURE 0x000000016b40bfe0
-[RCTBaseTextInputView textInputDidBeginEditing]


Crashed: com.apple.main-thread
0  libobjc.A.dylib                0x22ae7c7e4 lookUpImpOrForward + 4
1  libobjc.A.dylib                0x22ae70aec class_respondsToSelector + 40
2  UIKitCore                      0x258dc6c18 -[UITextField forwardingTargetForSelector:] + 60
3  CoreFoundation                 0x22bca932c ___forwarding___ + 160
4  CoreFoundation                 0x22bcab4bc _CF_forwarding_prep_0 + 92
5  UIKitCore                      0x258e208e0 -[UITextInputTraits extendedPathToObtainTraitsFrom:lightweight:] + 344
6  UIKitCore                      0x258e21824 -[UITextInputTraits takeTraitsFrom:lightweight:] + 156
7  CoreFoundation                 0x22bcab660 __invoking___ + 144
8  CoreFoundation                 0x22bb87980 -[NSInvocation invoke] + 292
9  CoreFoundation                 0x22bb88564 -[NSInvocation invokeWithTarget:] + 60
10 UIKitCore                      0x258df087c -[UITextInputController forwardInvocation:] + 144
11 CoreFoundation                 0x22bca950c ___forwarding___ + 640
12 CoreFoundation                 0x22bcab4bc _CF_forwarding_prep_0 + 92
13 UIKitCore                      0x258dbaaa8 -[UIFieldEditor _textInputTraits] + 84
14 UIKitCore                      0x258db9f24 -[UIFieldEditor layoutManager:shouldGenerateGlyphs:properties:characterIndexes:font:forGlyphRange:] + 92
15 UIFoundation                   0x23626a084 -[NSGlyphGenerator generateGlyphsForGlyphStorage:desiredNumberOfCharacters:glyphIndex:characterIndex:] + 3596
16 UIFoundation                   0x23626a410 -[NSLayoutManager(NSPrivate) _fillGlyphHoleForCharacterRange:startGlyphIndex:desiredNumberOfCharacters:] + 704
17 UIFoundation                   0x2362af23c _NSFastFillAllGlyphHolesForCharacterRange + 912
18 UIFoundation                   0x23626abfc -[NSLayoutManager glyphRangeForCharacterRange:actualCharacterRange:] + 76
19 UIFoundation                   0x236258ad8 -[NSLayoutManager(NSPrivate) _fillLayoutHoleForCharacterRange:desiredNumberOfLines:isSoft:] + 712
20 UIFoundation                   0x23625d69c -[NSLayoutManager(NSPrivate) _fillLayoutHoleAtIndex:desiredNumberOfLines:] + 196
21 UIFoundation                   0x236265498 -[NSLayoutManager(NSPrivate) _markSelfAsDirtyForBackgroundLayout:] + 432
22 UIFoundation                   0x23625fcfc -[NSLayoutManager(NSPrivate) _invalidateLayoutForExtendedCharacterRange:isSoft:invalidateUsage:] + 2180
23 UIFoundation                   0x2362761c4 -[NSLayoutManager invalidateLayoutForCharacterRange:actualCharacterRange:] + 116
24 UIKitCore                      0x258dce0f8 -[UITextField _invalidateAllGlyphsAndTextLayout] + 136
25 UIKitCore                      0x258dbfb84 -[UITextField _becomeFirstResponder] + 180
26 UIKitCore                      0x258dc02ac -[UITextField _windowBecameKey] + 56
27 UIKitCore                      0x258d8194c -[UITextInteractionAssistant(UITextInteractionAssistant_Internal) setFirstResponderIfNecessary] + 396
28 UIKitCore                      0x258d82a7c -[UITextInteractionAssistant(UITextInteractionAssistant_Internal) selectAll:] + 40
29 UIKitCore                      0x258dd206c -[UITextField selectAll:] + 80
30 AppName                       0x104c8cafc -[RCTBaseTextInputView textInputDidBeginEditing] (RCTBaseTextInputView.m:234)
31 AppName                       0x104c89794 -[RCTBackedTextFieldDelegateAdapter textFieldDidBeginEditing:] (RCTBackedTextInputDelegateAdapter.m:51)
32 UIKitCore                      0x258dc005c -[UITextField _notifyDidBeginEditing] + 132
33 UIKitCore                      0x258dbfcd0 -[UITextField _becomeFirstResponder] + 512
34 UIKitCore                      0x258b019b8 -[UIResponder becomeFirstResponder] + 56
35 UIKitCore                      0x258f61a68 -[UIView(Hierarchy) becomeFirstResponder] + 396
36 UIKitCore                      0x258dbe980 -[UITextField becomeFirstResponder] + 40
37 UIKitCore                      0x258d81880 -[UITextInteractionAssistant(UITextInteractionAssistant_Internal) setFirstResponderIfNecessary] + 80
38 UIKitCore                      0x258d6fa30 -[UITextSelectionInteraction oneFingerTap:] + 1869508
39 UIKitCore                      0x2586ed8fc -[UIGestureRecognizerTarget _sendActionWithGestureRecognizer:] + 1856348
40 UIKitCore                      0x2586f5f18 _UIGestureRecognizerSendTargetActions + 132
41 UIKitCore                      0x2586f379c _UIGestureRecognizerSendActions + 512
42 UIKitCore                      0x2586f2c84 -[UIGestureRecognizer _updateGestureWithEvent:buttonEvent:] + 56
43 UIKitCore                      0x2586e5f8c _UIGestureEnvironmentUpdate + 396
44 UIKitCore                      0x2586e5af8 -[UIGestureEnvironment _deliverEvent:toGestureRecognizers:usingBlock:] + 40
45 UIKitCore                      0x2586e58c8 -[UIGestureEnvironment _updateForEvent:window:] + 80
46 UIKitCore                      0x258b10e5c -[UIWindow sendEvent:] + 1869508
47 UIKitCore                      0x258af03c0 -[UIApplication sendEvent:] + 1856348
48 UIKitCore                      0x258bbb23c __dispatchPreprocessedEventFromEventQueue + 132
49 UIKitCore                      0x258bbdca8 __handleEventQueueInternal + 512
50 UIKitCore                      0x258bb683c __handleHIDEventFetcherDrain + 56
51 CoreFoundation                 0x22bc325b8 __CFRUNLOOP_IS_CALLING_OUT_TO_A_SOURCE0_PERFORM_FUNCTION__ + 396
52 CoreFoundation                 0x22bc32538 __CFRunLoopDoSource0 + 40
53 CoreFoundation                 0x22bc31e1c __CFRunLoopDoSources0 + 80
54 CoreFoundation                 0x22bc2cce8 __CFRunLoopRun + 1869508
55 CoreFoundation                 0x22bc2c5b8 CFRunLoopRunSpecific + 1856348
56 GraphicsServices               0x22dea0584 GSEventRunModal + 132
57 UIKitCore                      0x258ad4bc8 UIApplicationMain + 512
58 AppName                       0x1048fcac8 main (main.m:16)
59 libdyld.dylib                  0x22b6ecb94 start + 396

Associated iOS information on autofill protocols: https://developer.apple.com/documentation/security/password_autofill/about_the_password_autofill_workflow

[ZLJASON]

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)
Exception Subtype: KERN_PROTECTION_FAILURE at 0x00000002370319b8
VM Region Info: 0x2370319b8 is in 0x2370304f0-0x237039968; bytes after start: 5320 bytes before end: 32687
REGION TYPE START - END [ VSIZE] PRT/MAX SHRMOD REGION DETAIL
unused shlib __DATA 00000002370304e8-00000002370304f0 [ 8] rw-/rw- SM=COW ... this process
---> __DATA_DIRTY 00000002370304f0-0000000237039968 [ 37K] rw-/rw- SM=COW ...oreFoundation
__DATA_DIRTY 0000000237039968-000000023703c438 [ 11K] rw-/rw- SM=COW ...ork/CFNetwork

Termination Signal: Bus error: 10
Termination Reason: Namespace SIGNAL, Code 0xa
Terminating Process: exc handler [1860]
Triggered by Thread: 9

Thread 0 name: Dispatch queue: com.apple.main-thread
Thread 0:
0 libdispatch.dylib 0x00000001fd7a6618 _os_object_release$VARIANT$mp + 0
1 UIKitCore 0x000000022ae7a000 _afterCACommitHandler + 228
2 CoreFoundation 0x00000001fdd5b7a8 CFRUNLOOP_IS_CALLING_OUT_TO_AN_OBSERVER_CALLBACK_FUNCTION + 32
3 CoreFoundation 0x00000001fdd5643c __CFRunLoopDoObservers + 412
4 CoreFoundation 0x00000001fdd569dc __CFRunLoopRun + 1264
5 CoreFoundation 0x00000001fdd561cc CFRunLoopRunSpecific + 436
6 GraphicsServices 0x00000001fffcd584 GSEventRunModal + 100
7 UIKitCore 0x000000022ae51054 UIApplicationMain + 212
8 sxgk 0x000000010425bd48 main + 32072 (main.m:14)
9 libdyld.dylib 0x00000001fd816bb4 start + 4

[s349856186]

Same issue for me. and can't input.

Is there any solution？

[methodbox]

It doesn't look to me like textContentType does anything at all.

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.

[narobertson42]

@methodbox I believe the prop type you're thinking of is keyboardType, see https://facebook.github.io/react-native/docs/textinput#keyboardtype.

textContentType provides semantic meaning to the field and enables iOS devices to autofill them. The issue above is that textContentType={'password'}causes a crash.

[methodbox]

@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.

[narobertson42]

@methodbox

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

	textContentType?: ?(
	| 'none'
	| 'URL'
	| 'addressCity'
	| 'addressCityAndState'
	| 'addressState'
	| 'countryName'
	| 'creditCardNumber'
	| 'emailAddress'
	| 'familyName'
	| 'fullStreetAddress'
	| 'givenName'
	| 'jobTitle'
	| 'location'
	| 'middleName'
	| 'name'
	| 'namePrefix'
	| 'nameSuffix'
	| 'nickname'
	| 'organizationName'
	| 'postalCode'
	| 'streetAddressLine1'
	| 'streetAddressLine2'
	| 'sublocality'
	| 'telephoneNumber'
	| 'username'
	| 'password'
	| 'newPassword'
	| 'oneTimeCode'
	),

react-native/Libraries/Text/TextInput/RCTBaseTextInputView.m

Lines 202 to 211 in f307ac7

	- (void)setTextContentType:(NSString *)type
	{
	#if defined(__IPHONE_OS_VERSION_MAX_ALLOWED) && __IPHONE_OS_VERSION_MAX_ALLOWED >= __IPHONE_10_0
	if (@available(iOS 10.0, *)) {
	// Setting textContentType to an empty string will disable any
	// default behaviour, like the autofill bar for password inputs
	self.backedTextInputView.textContentType = [type isEqualToString:@"none"] ? @"" : type;
	}
	#endif
	}

[methodbox]

@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:
#22611

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.

[riso]

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.

[methodbox]

@riso

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.

[riso]

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 newPassword before, but I think that somehow RN / iOS inferred it from the fact that's a secureTextEntry. I think specifying newPassword only makes the issue more reproducible now.

A minimal example is

<TextInput 
  textContentType={'newPassword'}
  selectTextOnFocus={true}
  secureTextEntry={true}
/>

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.

[gianpaj]

@riso

I think specifying newPassword only makes the issue more reproducible now.

From my experience also, I believe that's true.

[DataGreed]

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?

[sturmenta]

I'm also experiencing this bug.

"react-native": "0.56.0",
"react": "16.4.1",

[Vitalik7]

same issue http://prntscr.com/oe6j0v

[mattixiv]

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.

[iamgerardm]

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

[jefferyFarlyProvencher]

Hi there, I'm having the same issue on RN v61.4.

Is there any fix?

I have tried :

• textContentType="", textContentType="newPassword", textContentType="password"
• blurOnSubmit={false} (<- this seems to reduce the occurrences, but the issue happened again when using a tab button on a physical keyboard to change from and to the textInput with secureTextEntry enabled)

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...

[codeinuit]

@iamgerardm my man. Not a permanent fix but prevents the bug, thanks a lot :)

[FanchenBao]

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

1. If all the input is done via physical keyboard exclusively or via virtual keyboard exclusively, the yellow box does not show up.
2. If there is any mix of physical and virtual keyboard during input, the yellow box shows up. e.g. type a password using the physical keyboard and press "Return" on the virtual keyboard.

Scenario 2

// some other text input
<TextInput secureTextEntry={true}> // input1

With 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 textContentType is set to "newPassword", then mixing will cause the yellow box to show up, even if there is only one secure text present.

Temporary Workaround

Since 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}> // input2

One 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.

[alielmajdaoui]

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.

[zainali225]

My issue was with keyboardType="email-address" when user enter saved email. So, I added
@android:color/transparent

in 'android/app/src/main/res/values/styles.xml'.

[mxmkhv]

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.

[VictorioMolina]

Same issue here.

[CorinneKelly]

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?

[luck2011]

+1

[keremec]

RN: 0.68, iOS:15.4 The problem still persists.

[tylercote]

RN: 0.67 as well, still happening

[isaacparsons-dw]

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:
Fix: override the blurOnSubmit flag to false, onSubmitEditing to a function which dismisses the keyboard manually.

[gogolubev]

I faced the same issue when I wrote tests for Detox. In my case, the yellow highlight appears when testID of the password input (or input before it) contains the 'signUp' substring. So, I didn't add the textContentType='oneTimeCode' and fixed the issue by removing 'signUp' from my testIDs.
This is a rare case, but it may be helpful for someone.

[daxfrost]

Is there any plan to resolve this? Seems like this issue has existed for quite some time.

[gus-t27]

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.

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

[timyhou]

I faced the same issue when I wrote tests for Detox. In my case, the yellow highlight appears when testID of the password input (or input before it) contains the 'signUp' substring. So, I didn't add the textContentType='oneTimeCode' and fixed the issue by removing 'signUp' from my testIDs. This is a rare case, but it may be helpful for someone.

No freaking way...

This was my issue too. I changed a testID from password-input to SignUpNew--password-input and it broke the Detox test because of the Strong Password Autocomplete pop up.

<TextInput
secureTextEntry={true}
placeholder="Enter your password"
placeholderTextColor="#aaa"
autoCorrect={false}
autoComplete="password-new"
testID="password-input"

[balsloev]

In my case I have two password input fields for entering the same password twice.
iOS Auto Fill password did only work if I also added a username field. I don't want to show the username to the user, so I have hidden it like so:

<TextInput
  textContentType="username"
  autoComplete="username-new"
  value={username}
  style={{ height: 0.1, width: 0.1, overflow: "hidden" }}
/>

[iway1]

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

[Nek-]

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:

1. I fill the first input with a custom password
2. It suggests also strong password for the second input
3. When trying to fill the second input, it emptys the first one
4. Same when I try to fill the first again...

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...

[Olixfills]

textContentType='oneTimeCode'

This worked for me...

[dustinyoste]

*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. password and confirm password or in most cases just multiple
fields on the form, try filling out the inputs last to first. I believe this approach worked around this problem for me.

It shouldn't be necessary to go last to first on all inputs but test it out and see where it helps.

[fabOnReact]

@dustinyoste can you reproduce this issue on a real device?
I refer to #21911 (comment) and #21911 (comment)

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.

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

[react-native-bot]

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.

[Pratap22]

This issues is not being fixed yet. We are still waiting this to be fixed.

[Paul-Ananich]

Have the same issue on "react-native": "0.75.4",

[Paul-Ananich]

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.

It works for me!!!