Skip to content

Commit

Permalink
Add autoComplete prop (#21575)
Browse files Browse the repository at this point in the history
Summary:
TL;DR: Setting `autoComplete` will allow the system to suggest autofill options for the `<TextInput>` component.

Android Oreo introduced the AutoFill Framework, for secure communication between an app and autofill services (e.g. Password managers). When using `<TextInput>` on Android Oreo+, the system already tries to autofill (based on heuristics), but there is no way to set configuring options or disable.

The quick solution would be to just add the same Android attributes (`autofillHints` & `importantForAutofill`) in React Native TextInput, but that doesn't bond well with the cross-platform nature of the library.

Introduces an `autoComplete` prop based on HTML's `autocomplete` attribute, mapping to Android `autofillHints` & `importantForAutofill` and serving as a proper placeholder for autofill/autocomplete in other platforms:

Also gives you the ability to disable autofill by setting autocomplete="off".
Pull Request resolved: #21575

Differential Revision: D14102949

Pulled By: hramos

fbshipit-source-id: 7601aeaca0332a1f3ce8da8020dba037b700853a
  • Loading branch information
Cassio Zen authored and facebook-github-bot committed Feb 15, 2019
1 parent 53b87dc commit f151456
Show file tree
Hide file tree
Showing 2 changed files with 89 additions and 0 deletions.
54 changes: 54 additions & 0 deletions Libraries/Components/TextInput/TextInput.js
Original file line number Diff line number Diff line change
Expand Up @@ -223,6 +223,21 @@ type IOSProps = $ReadOnly<{|
|}>;

type AndroidProps = $ReadOnly<{|
autoCompleteType?: ?(
| 'cc-csc'
| 'cc-exp'
| 'cc-exp-month'
| 'cc-exp-year'
| 'cc-number'
| 'email'
| 'name'
| 'password'
| 'postal-code'
| 'street-address'
| 'tel'
| 'username'
| 'off'
),
returnKeyLabel?: ?string,
numberOfLines?: ?number,
disableFullscreenUI?: ?boolean,
Expand Down Expand Up @@ -413,6 +428,45 @@ const TextInput = createReactClass({
'words',
'characters',
]),
/**
* Determines which content to suggest on auto complete, e.g.`username`.
* To disable auto complete, use `off`.
*
* *Android Only*
*
* The following values work on Android only:
*
* - `username`
* - `password`
* - `email`
* - `name`
* - `tel`
* - `street-address`
* - `postal-code`
* - `cc-number`
* - `cc-csc`
* - `cc-exp`
* - `cc-exp-month`
* - `cc-exp-year`
* - `off`
*
* @platform android
*/
autoCompleteType: PropTypes.oneOf([
'cc-csc',
'cc-exp',
'cc-exp-month',
'cc-exp-year',
'cc-number',
'email',
'name',
'password',
'postal-code',
'street-address',
'tel',
'username',
'off',
]),
/**
* If `false`, disables auto-correct. The default value is `true`.
*/
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -529,6 +529,41 @@ public void setMaxLength(ReactEditText view, @Nullable Integer maxLength) {
view.setFilters(newFilters);
}

@ReactProp(name = "autoComplete")
public void setTextContentType(ReactEditText view, @Nullable String autocomplete) {
if (autocomplete == null) {
view.setImportantForAutofill(View.IMPORTANT_FOR_AUTOFILL_NO);
} else if ("username".equals(autocomplete)) {
view.setAutofillHints(View.AUTOFILL_HINT_USERNAME);
} else if ("password".equals(autocomplete)) {
view.setAutofillHints(View.AUTOFILL_HINT_PASSWORD);
} else if ("email".equals(autocomplete)) {
view.setAutofillHints(View.AUTOFILL_HINT_EMAIL_ADDRESS);
} else if ("name".equals(autocomplete)) {
view.setAutofillHints(View.AUTOFILL_HINT_NAME);
} else if ("tel".equals(autocomplete)) {
view.setAutofillHints(View.AUTOFILL_HINT_PHONE);
} else if ("street-address".equals(autocomplete)) {
view.setAutofillHints(View.AUTOFILL_HINT_POSTAL_ADDRESS);
} else if ("postal-code".equals(autocomplete)) {
view.setAutofillHints(View.AUTOFILL_HINT_POSTAL_CODE);
} else if ("cc-number".equals(autocomplete)) {
view.setAutofillHints(View.AUTOFILL_HINT_CREDIT_CARD_NUMBER);
} else if ("cc-csc".equals(autocomplete)) {
view.setAutofillHints(View.AUTOFILL_HINT_CREDIT_CARD_SECURITY_CODE);
} else if ("cc-exp".equals(autocomplete)) {
view.setAutofillHints(View.AUTOFILL_HINT_CREDIT_CARD_EXPIRATION_DATE);
} else if ("cc-exp-month".equals(autocomplete)) {
view.setAutofillHints(View.AUTOFILL_HINT_CREDIT_CARD_EXPIRATION_MONTH);
} else if ("cc-exp-year".equals(autocomplete)) {
view.setAutofillHints(View.AUTOFILL_HINT_CREDIT_CARD_EXPIRATION_YEAR);
} else if ("off".equals(autocomplete)) {
view.setImportantForAutofill(View.IMPORTANT_FOR_AUTOFILL_NO);
} else {
throw new JSApplicationIllegalArgumentException("Invalid autocomplete option: " + autocomplete);
}
}

@ReactProp(name = "autoCorrect")
public void setAutoCorrect(ReactEditText view, @Nullable Boolean autoCorrect) {
// clear auto correct flags, set SUGGESTIONS or NO_SUGGESTIONS depending on value
Expand Down

0 comments on commit f151456

Please sign in to comment.