[iOS][TextInput] Add iOS 10 textContentType for TextInput #18526
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Provide the keyboard and system with semantic meaning for inputs. Should enable password/username autofill in apps running on iOS 11. Also gives you the ability to disable autofill by setting textContentType=none
react-native-bot
added
📋Release Notes
Platform: iOS
facebook-github-bot
added
the
CLA Signed
janicduplessis
suggested changes
Apr 1, 2018
There was a problem hiding this comment.
Looks good, just one question, what happens if you pass an invalid string? This field is kind of weird because it's a string typedef instead of an objc enum (https://developer.apple.com/documentation/uikit/uitextcontenttype?language=objc).
@shergin What do you think about this, should we add this to RCTConvert instead of passing the string value directly from JS?
| { | ||
| #if defined(__IPHONE_OS_VERSION_MAX_ALLOWED) && __IPHONE_OS_VERSION_MAX_ALLOWED >= __IPHONE_10_0 | ||
| if (@available(iOS 10.0, *)) { | ||
| self.backedTextInputView.textContentType = [type isEqualToString:@"none"] ? @"" : type; |
There was a problem hiding this comment.
According to apple's doc the default value is nil, so I guess we should use that instead of an empty string.
There was a problem hiding this comment.
Nevermind, just read the part about it in your test plan, maybe add a comment to explain why we use the empty string.
There was a problem hiding this comment.
It seems like for password inputs, it still defaults to textContentType equal to password, even if you haven't explicitly set that value. So setting an empty string will let you disable autofill for passwords. I can add a comment in the obj-c code 👍
| @@ -167,6 +167,15 @@ - (void)setSelection:(RCTTextSelection *)selection | |||
| } | |||
| } | |||
|
|
|||
| - (void)setTextContentType:(NSString*)type | |||
There was a problem hiding this comment.
Nit: Space between NSString and *
|
Updated according to comments. Have not noticed any side effects from setting an invalid string. I was thinking that since the valid ones were defined in |
janicduplessis
approved these changes
Apr 1, 2018
|
@facebook-github-bot shipit |
facebook-github-bot
added
the
Import Started
facebook-github-bot
approved these changes
Apr 1, 2018
There was a problem hiding this comment.
@janicduplessis is landing this pull request. If you are a Facebook employee, you can view this diff on Phabricator.
campsafari
pushed a commit
to exozet/react-native
that referenced
this pull request
Apr 11, 2018
Summary: Setting `textContentType` will provide the keyboard and system with semantic meaning for inputs. Should enable password/username autofill in apps running on iOS 11+ as demonstrated here: https://developer.apple.com/videos/play/wwdc2017/206/ Also gives you the ability to disable autofill by setting `textContentType="none"`: https://stackoverflow.com/questions/48489479/react-native-disable-password-autofill-option-on-ios-keyboard Adding `textContentType` equal to `username` or `password` should give you an autofill-bar over the keyboard which will let you fill in values from the device Keychain:  Setting the appropriate `textContentType` will fill in the correct value in the `TextInput`. I have only been able to get this to work on device, and not simulator. Usage: ```jsx <TextInput value={this.state.username} onChangeText={this.setUserName} textContentType="username" /> ``` ```jsx <TextInput value={this.state.password} onChangeText={this.setPassword} secureTextEntry={true} textContentType="password" /> ``` To disable: ```jsx <TextInput value={this.state.password} onChangeText={this.setPassword} secureTextEntry={true} textContentType="none" /> ``` This will set `textContentType` to an empty string: https://stackoverflow.com/a/46474180/5703116 <!-- Does this PR require a documentation change? Create a PR at https://github.com/facebook/react-native-website and add a link to it here. --> Docs PR coming up. [IOS] [MINOR] [TextInput] - Added `textContentType` prop for iOS 10+. Will enable password autofill for iOS 11+. Closes facebook#18526 Differential Revision: D7469630 Pulled By: hramos fbshipit-source-id: 852a9749be98d477ecd82154c0a65a7c084521c1
LukeDurrant
pushed a commit
to LukeDurrant/react-native
that referenced
this pull request
Apr 11, 2018
Summary: Setting `textContentType` will provide the keyboard and system with semantic meaning for inputs. Should enable password/username autofill in apps running on iOS 11+ as demonstrated here: https://developer.apple.com/videos/play/wwdc2017/206/ Also gives you the ability to disable autofill by setting `textContentType="none"`: https://stackoverflow.com/questions/48489479/react-native-disable-password-autofill-option-on-ios-keyboard Adding `textContentType` equal to `username` or `password` should give you an autofill-bar over the keyboard which will let you fill in values from the device Keychain:  Setting the appropriate `textContentType` will fill in the correct value in the `TextInput`. I have only been able to get this to work on device, and not simulator. Usage: ```jsx <TextInput value={this.state.username} onChangeText={this.setUserName} textContentType="username" /> ``` ```jsx <TextInput value={this.state.password} onChangeText={this.setPassword} secureTextEntry={true} textContentType="password" /> ``` To disable: ```jsx <TextInput value={this.state.password} onChangeText={this.setPassword} secureTextEntry={true} textContentType="none" /> ``` This will set `textContentType` to an empty string: https://stackoverflow.com/a/46474180/5703116 <!-- Does this PR require a documentation change? Create a PR at https://github.com/facebook/react-native-website and add a link to it here. --> Docs PR coming up. [IOS] [MINOR] [TextInput] - Added `textContentType` prop for iOS 10+. Will enable password autofill for iOS 11+. Closes facebook#18526 Differential Revision: D7469630 Pulled By: hramos fbshipit-source-id: 852a9749be98d477ecd82154c0a65a7c084521c1
LukeDurrant
pushed a commit
to LukeDurrant/react-native
that referenced
this pull request
Apr 11, 2018
Summary: Setting `textContentType` will provide the keyboard and system with semantic meaning for inputs. Should enable password/username autofill in apps running on iOS 11+ as demonstrated here: https://developer.apple.com/videos/play/wwdc2017/206/ Also gives you the ability to disable autofill by setting `textContentType="none"`: https://stackoverflow.com/questions/48489479/react-native-disable-password-autofill-option-on-ios-keyboard Adding `textContentType` equal to `username` or `password` should give you an autofill-bar over the keyboard which will let you fill in values from the device Keychain:  Setting the appropriate `textContentType` will fill in the correct value in the `TextInput`. I have only been able to get this to work on device, and not simulator. Usage: ```jsx <TextInput value={this.state.username} onChangeText={this.setUserName} textContentType="username" /> ``` ```jsx <TextInput value={this.state.password} onChangeText={this.setPassword} secureTextEntry={true} textContentType="password" /> ``` To disable: ```jsx <TextInput value={this.state.password} onChangeText={this.setPassword} secureTextEntry={true} textContentType="none" /> ``` This will set `textContentType` to an empty string: https://stackoverflow.com/a/46474180/5703116 <!-- Does this PR require a documentation change? Create a PR at https://github.com/facebook/react-native-website and add a link to it here. --> Docs PR coming up. [IOS] [MINOR] [TextInput] - Added `textContentType` prop for iOS 10+. Will enable password autofill for iOS 11+. Closes facebook#18526 Differential Revision: D7469630 Pulled By: hramos fbshipit-source-id: 852a9749be98d477ecd82154c0a65a7c084521c1
bunnyc1986
pushed a commit
to bunnyc1986/react-native
that referenced
this pull request
May 11, 2018
Summary: Setting `textContentType` will provide the keyboard and system with semantic meaning for inputs. Should enable password/username autofill in apps running on iOS 11+ as demonstrated here: https://developer.apple.com/videos/play/wwdc2017/206/ Also gives you the ability to disable autofill by setting `textContentType="none"`: https://stackoverflow.com/questions/48489479/react-native-disable-password-autofill-option-on-ios-keyboard Adding `textContentType` equal to `username` or `password` should give you an autofill-bar over the keyboard which will let you fill in values from the device Keychain:  Setting the appropriate `textContentType` will fill in the correct value in the `TextInput`. I have only been able to get this to work on device, and not simulator. Usage: ```jsx <TextInput value={this.state.username} onChangeText={this.setUserName} textContentType="username" /> ``` ```jsx <TextInput value={this.state.password} onChangeText={this.setPassword} secureTextEntry={true} textContentType="password" /> ``` To disable: ```jsx <TextInput value={this.state.password} onChangeText={this.setPassword} secureTextEntry={true} textContentType="none" /> ``` This will set `textContentType` to an empty string: https://stackoverflow.com/a/46474180/5703116 <!-- Does this PR require a documentation change? Create a PR at https://github.com/facebook/react-native-website and add a link to it here. --> Docs PR coming up. [IOS] [MINOR] [TextInput] - Added `textContentType` prop for iOS 10+. Will enable password autofill for iOS 11+. Closes facebook#18526 Differential Revision: D7469630 Pulled By: hramos fbshipit-source-id: 852a9749be98d477ecd82154c0a65a7c084521c1
macdoum1
pushed a commit
to macdoum1/react-native
that referenced
this pull request
Jun 28, 2018
Summary: Setting `textContentType` will provide the keyboard and system with semantic meaning for inputs. Should enable password/username autofill in apps running on iOS 11+ as demonstrated here: https://developer.apple.com/videos/play/wwdc2017/206/ Also gives you the ability to disable autofill by setting `textContentType="none"`: https://stackoverflow.com/questions/48489479/react-native-disable-password-autofill-option-on-ios-keyboard Adding `textContentType` equal to `username` or `password` should give you an autofill-bar over the keyboard which will let you fill in values from the device Keychain:  Setting the appropriate `textContentType` will fill in the correct value in the `TextInput`. I have only been able to get this to work on device, and not simulator. Usage: ```jsx <TextInput value={this.state.username} onChangeText={this.setUserName} textContentType="username" /> ``` ```jsx <TextInput value={this.state.password} onChangeText={this.setPassword} secureTextEntry={true} textContentType="password" /> ``` To disable: ```jsx <TextInput value={this.state.password} onChangeText={this.setPassword} secureTextEntry={true} textContentType="none" /> ``` This will set `textContentType` to an empty string: https://stackoverflow.com/a/46474180/5703116 <!-- Does this PR require a documentation change? Create a PR at https://github.com/facebook/react-native-website and add a link to it here. --> Docs PR coming up. [IOS] [MINOR] [TextInput] - Added `textContentType` prop for iOS 10+. Will enable password autofill for iOS 11+. Closes facebook#18526 Differential Revision: D7469630 Pulled By: hramos fbshipit-source-id: 852a9749be98d477ecd82154c0a65a7c084521c1
sidnair
pushed a commit
to taptapsend/react-native
that referenced
this pull request
Aug 2, 2018
Summary: Setting `textContentType` will provide the keyboard and system with semantic meaning for inputs. Should enable password/username autofill in apps running on iOS 11+ as demonstrated here: https://developer.apple.com/videos/play/wwdc2017/206/ Also gives you the ability to disable autofill by setting `textContentType="none"`: https://stackoverflow.com/questions/48489479/react-native-disable-password-autofill-option-on-ios-keyboard Adding `textContentType` equal to `username` or `password` should give you an autofill-bar over the keyboard which will let you fill in values from the device Keychain:  Setting the appropriate `textContentType` will fill in the correct value in the `TextInput`. I have only been able to get this to work on device, and not simulator. Usage: ```jsx <TextInput value={this.state.username} onChangeText={this.setUserName} textContentType="username" /> ``` ```jsx <TextInput value={this.state.password} onChangeText={this.setPassword} secureTextEntry={true} textContentType="password" /> ``` To disable: ```jsx <TextInput value={this.state.password} onChangeText={this.setPassword} secureTextEntry={true} textContentType="none" /> ``` This will set `textContentType` to an empty string: https://stackoverflow.com/a/46474180/5703116 <!-- Does this PR require a documentation change? Create a PR at https://github.com/facebook/react-native-website and add a link to it here. --> Docs PR coming up. [IOS] [MINOR] [TextInput] - Added `textContentType` prop for iOS 10+. Will enable password autofill for iOS 11+. Closes facebook#18526 Differential Revision: D7469630 Pulled By: hramos fbshipit-source-id: 852a9749be98d477ecd82154c0a65a7c084521c1
ide
pushed a commit
to expo/react-native
that referenced
this pull request
Aug 31, 2018
Summary: Setting `textContentType` will provide the keyboard and system with semantic meaning for inputs. Should enable password/username autofill in apps running on iOS 11+ as demonstrated here: https://developer.apple.com/videos/play/wwdc2017/206/ Also gives you the ability to disable autofill by setting `textContentType="none"`: https://stackoverflow.com/questions/48489479/react-native-disable-password-autofill-option-on-ios-keyboard Adding `textContentType` equal to `username` or `password` should give you an autofill-bar over the keyboard which will let you fill in values from the device Keychain:  Setting the appropriate `textContentType` will fill in the correct value in the `TextInput`. I have only been able to get this to work on device, and not simulator. Usage: ```jsx <TextInput value={this.state.username} onChangeText={this.setUserName} textContentType="username" /> ``` ```jsx <TextInput value={this.state.password} onChangeText={this.setPassword} secureTextEntry={true} textContentType="password" /> ``` To disable: ```jsx <TextInput value={this.state.password} onChangeText={this.setPassword} secureTextEntry={true} textContentType="none" /> ``` This will set `textContentType` to an empty string: https://stackoverflow.com/a/46474180/5703116 <!-- Does this PR require a documentation change? Create a PR at https://github.com/facebook/react-native-website and add a link to it here. --> Docs PR coming up. [IOS] [MINOR] [TextInput] - Added `textContentType` prop for iOS 10+. Will enable password autofill for iOS 11+. Closes facebook#18526 Differential Revision: D7469630 Pulled By: hramos fbshipit-source-id: 852a9749be98d477ecd82154c0a65a7c084521c1
filmhomage
pushed a commit
to filmhomage/react-native
that referenced
this pull request
Oct 4, 2018
Summary: Setting `textContentType` will provide the keyboard and system with semantic meaning for inputs. Should enable password/username autofill in apps running on iOS 11+ as demonstrated here: https://developer.apple.com/videos/play/wwdc2017/206/ Also gives you the ability to disable autofill by setting `textContentType="none"`: https://stackoverflow.com/questions/48489479/react-native-disable-password-autofill-option-on-ios-keyboard Adding `textContentType` equal to `username` or `password` should give you an autofill-bar over the keyboard which will let you fill in values from the device Keychain:  Setting the appropriate `textContentType` will fill in the correct value in the `TextInput`. I have only been able to get this to work on device, and not simulator. Usage: ```jsx <TextInput value={this.state.username} onChangeText={this.setUserName} textContentType="username" /> ``` ```jsx <TextInput value={this.state.password} onChangeText={this.setPassword} secureTextEntry={true} textContentType="password" /> ``` To disable: ```jsx <TextInput value={this.state.password} onChangeText={this.setPassword} secureTextEntry={true} textContentType="none" /> ``` This will set `textContentType` to an empty string: https://stackoverflow.com/a/46474180/5703116 <!-- Does this PR require a documentation change? Create a PR at https://github.com/facebook/react-native-website and add a link to it here. --> Docs PR coming up. [IOS] [MINOR] [TextInput] - Added `textContentType` prop for iOS 10+. Will enable password autofill for iOS 11+. Closes facebook#18526 Differential Revision: D7469630 Pulled By: hramos fbshipit-source-id: 852a9749be98d477ecd82154c0a65a7c084521c1
|
What's the correct way to get a callback when the form was autofilled to submit the form directly? |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Motivation
Setting
textContentTypewill provide the keyboard and system with semantic meaning for inputs. Should enable password/username autofill in apps running on iOS 11+ as demonstrated here: https://developer.apple.com/videos/play/wwdc2017/206/Also gives you the ability to disable autofill by setting
textContentType="none": https://stackoverflow.com/questions/48489479/react-native-disable-password-autofill-option-on-ios-keyboardTest Plan
Adding
textContentTypeequal tousernameorpasswordshould give you an autofill-bar over the keyboard which will let you fill in values from the device Keychain:Setting the appropriate
textContentTypewill fill in the correct value in theTextInput.I have only been able to get this to work on device, and not simulator.
Usage:
To disable:
This will set
textContentTypeto an empty string: https://stackoverflow.com/a/46474180/5703116Related PRs
Docs PR: facebook/react-native-website#277
Release Notes
[IOS] [MINOR] [TextInput] - Added
textContentTypeprop for iOS 10+. Will enable password autofill for iOS 11+.