react-native
react-native copied to clipboard
facebook
TextInput with SecureEntry sometimes highlights yellow with "Strong Password" text, and becomes unuseable
- [X] Review the documentation: https://facebook.github.io/react-native
- [X] Search for existing issues: https://github.com/facebook/react-native/issues
- [X] 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.
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
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
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
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.
@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.
@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.
@methodbox
It works for me, when I select the field suggestions appear at the top of the software keyboard.
https://github.com/facebook/react-native/blob/11df0eae5ff8f530bfaf56aaf2209ff48f3ed9ac/Libraries/Components/TextInput/TextInput.js#L192-L221
https://github.com/facebook/react-native/blob/f307ac7c5e3adb9b4c0f8b2e4b8cdc2f980c7733/Libraries/Text/TextInput/RCTBaseTextInputView.m#L202-L211
@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: https://github.com/facebook/react-native/pull/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.
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.
@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.
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.
@riso
I think specifying newPassword only makes the issue more reproducible now.
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", "react": "16.4.1",
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 :
- 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...
@iamgerardm my man. Not a permanent fix but prevents the bug, thanks a lot :)
Combining @iamgerardm solution with a Keyboard dismiss on submit seems to get the desired behavior back. `import { Keyboard } from 'react-native'
blurOnSubmit={false} onSubmitEditing={()=> Keyboard.dismiss()}`
Hi ! In my case, I resolved this issue by providing backgroundColor to the style of textInput
React-native version: 0.61.5
Having this issue with 0.61.4. In my sign up screen, I have two TextInput's with secureTextEntry, one to enter new password, and the other to re-enter new password. I sometimes get this behavior when I submit the first TextInput, and both of them become unusable with yellow background and a 'Strong password' text. It doesn't matter what I enter btw, even if I type '123' and submit, it gives me the same behavior.
Any news on how to get around this bug?
I tried a lot of different things and I'm experiencing some weird behaviour...
1.
<TextInput ... >
<TextInput textContentType={password} secureTextEntry={true}/>
<TextInput textContentType={'none'} secureTextEntry={true}/>
the yellow 'strong password' box makes me unable to edit. The app eventually crashes when I try to edit.
2.
<TextInput textContentType={password} secureTextEntry={true}/>
<TextInput ... >
<TextInput textContentType={'newPassword'} secureTextEntry={true}/>
same error as 1
3.
<TextInput textContentType={password} secureTextEntry={true}/>
<TextInput ... >
<TextInput textContentType={'none'} secureTextEntry={true}/>
works as expected
When clicking the yellow box, the app crashes.
I tried adding selectOnFocus=false, but it still crashes. I tried not adding the textContentType - but case 1. still has the same errors.
<Styled.TextInput secureTextEntry autoCapitalize="none" textContentType="password" onChangeText={val => setPassword(val)} placeholder="Password" placeholderTextColor={theme.colors.darkBlue} returnKeyType="go" ref={refPassword} blurOnSubmit={false} onSubmitEditing={onSignin} value={password} />
This is what is working for me lifted exactly from my code without modification.
This is not a React Native issue. I use Xamarin and React-Native and am seeing the same issues within my Xamarin project. This is most likely an issue with iOS 13 itself.
