From 9eb0881c8fecd0e974b1cb9f479bad3075854340 Mon Sep 17 00:00:00 2001 From: Marcel Lasaj Date: Thu, 11 Nov 2021 15:40:21 -0800 Subject: [PATCH] fix(android): Updated TextInput prop types to accomodate for new autoComplete values (#32575) Summary: This fixes the "Failed prop type: Invalid prop `autoComplete` of value `[any-of-the-new-values]`" warning, as mentioned in https://github.com/facebook/react-native/issues/32557. [This commit](https://github.com/facebook/react-native/commit/d9e0ea77f0111fd8400c65d68e45d54e2f84287b) introduced new HintConstants for autofill, but added those only to [`TextInput.js`](https://github.com/facebook/react-native/blob/main/Libraries/Components/TextInput/TextInput.js#L331) and forgot to add them (and the new docs' description) to either [`AndroidTextInputNativeComponent`](https://github.com/facebook/react-native/blob/main/Libraries/Components/TextInput/AndroidTextInputNativeComponent.js#L99) or [`DeprecatedTextInputPropTypes.js`](https://github.com/facebook/react-native/blob/main/Libraries/DeprecatedPropTypes/DeprecatedTextInputPropTypes.js#L67). I know, the latter has clearly been deprecated, but until it is actually being removed, it shouldn't throw warnings like that. ## Changelog [Android] [Fixed] - Updated TextInput prop types to accomodate for new autoComplete values Pull Request resolved: https://github.com/facebook/react-native/pull/32575 Test Plan: There is no warning after these changes. Reviewed By: yungsters Differential Revision: D32324108 Pulled By: lunaleaps fbshipit-source-id: df27cbbd54788f26471029c9201c6a27ca8b7893 --- .../AndroidTextInputNativeComponent.js | 70 +++++++++++--- Libraries/Components/TextInput/TextInput.js | 46 ++++++--- .../DeprecatedTextInputPropTypes.js | 94 ++++++++++++++++--- 3 files changed, 177 insertions(+), 33 deletions(-) diff --git a/Libraries/Components/TextInput/AndroidTextInputNativeComponent.js b/Libraries/Components/TextInput/AndroidTextInputNativeComponent.js index 944d4844e3f31a..26dfb420637695 100644 --- a/Libraries/Components/TextInput/AndroidTextInputNativeComponent.js +++ b/Libraries/Components/TextInput/AndroidTextInputNativeComponent.js @@ -73,42 +73,90 @@ export type NativeProps = $ReadOnly<{| * Android props after this */ /** - * Determines which content to suggest on auto complete, e.g.`username`. - * To disable auto complete, use `off`. + * Specifies autocomplete hints for the system, so it can provide autofill. On Android, the system will always attempt to offer autofill by using heuristics to identify the type of content. + * To disable autocomplete, set `autoComplete` to `off`. * * *Android Only* * - * The following values work on Android only: + * Possible values for `autoComplete` are: * - * - `username` - * - `password` - * - `email` - * - `name` - * - `tel` - * - `street-address` - * - `postal-code` - * - `cc-number` + * - `birthdate-day` + * - `birthdate-full` + * - `birthdate-month` + * - `birthdate-year` * - `cc-csc` * - `cc-exp` + * - `cc-exp-day` * - `cc-exp-month` * - `cc-exp-year` + * - `cc-number` + * - `email` + * - `gender` + * - `name` + * - `name-family` + * - `name-given` + * - `name-middle` + * - `name-middle-initial` + * - `name-prefix` + * - `name-suffix` + * - `password` + * - `password-new` + * - `postal-address` + * - `postal-address-country` + * - `postal-address-extended` + * - `postal-address-extended-postal-code` + * - `postal-address-locality` + * - `postal-address-region` + * - `postal-code` + * - `street-address` + * - `sms-otp` + * - `tel` + * - `tel-country-code` + * - `tel-national` + * - `tel-device` + * - `username` + * - `username-new` * - `off` * * @platform android */ autoComplete?: WithDefault< + | 'birthdate-day' + | 'birthdate-full' + | 'birthdate-month' + | 'birthdate-year' | 'cc-csc' | 'cc-exp' + | 'cc-exp-day' | 'cc-exp-month' | 'cc-exp-year' | 'cc-number' | 'email' + | 'gender' | 'name' + | 'name-family' + | 'name-given' + | 'name-middle' + | 'name-middle-initial' + | 'name-prefix' + | 'name-suffix' | 'password' + | 'password-new' + | 'postal-address' + | 'postal-address-country' + | 'postal-address-extended' + | 'postal-address-extended-postal-code' + | 'postal-address-locality' + | 'postal-address-region' | 'postal-code' | 'street-address' + | 'sms-otp' | 'tel' + | 'tel-country-code' + | 'tel-national' + | 'tel-device' | 'username' + | 'username-new' | 'off', 'off', >, diff --git a/Libraries/Components/TextInput/TextInput.js b/Libraries/Components/TextInput/TextInput.js index 6f8f96d33a0c73..53642621c58d75 100644 --- a/Libraries/Components/TextInput/TextInput.js +++ b/Libraries/Components/TextInput/TextInput.js @@ -305,25 +305,49 @@ type IOSProps = $ReadOnly<{| type AndroidProps = $ReadOnly<{| /** - * Determines which content to suggest on auto complete, e.g.`username`. - * To disable auto complete, use `off`. + * Specifies autocomplete hints for the system, so it can provide autofill. On Android, the system will always attempt to offer autofill by using heuristics to identify the type of content. + * To disable autocomplete, set `autoComplete` to `off`. * * *Android Only* * - * The following values work on Android only: + * Possible values for `autoComplete` are: * - * - `username` - * - `password` - * - `email` - * - `name` - * - `tel` - * - `street-address` - * - `postal-code` - * - `cc-number` + * - `birthdate-day` + * - `birthdate-full` + * - `birthdate-month` + * - `birthdate-year` * - `cc-csc` * - `cc-exp` + * - `cc-exp-day` * - `cc-exp-month` * - `cc-exp-year` + * - `cc-number` + * - `email` + * - `gender` + * - `name` + * - `name-family` + * - `name-given` + * - `name-middle` + * - `name-middle-initial` + * - `name-prefix` + * - `name-suffix` + * - `password` + * - `password-new` + * - `postal-address` + * - `postal-address-country` + * - `postal-address-extended` + * - `postal-address-extended-postal-code` + * - `postal-address-locality` + * - `postal-address-region` + * - `postal-code` + * - `street-address` + * - `sms-otp` + * - `tel` + * - `tel-country-code` + * - `tel-national` + * - `tel-device` + * - `username` + * - `username-new` * - `off` * * @platform android diff --git a/Libraries/DeprecatedPropTypes/DeprecatedTextInputPropTypes.js b/Libraries/DeprecatedPropTypes/DeprecatedTextInputPropTypes.js index 7eb73f751d850a..193865a2aa32ce 100644 --- a/Libraries/DeprecatedPropTypes/DeprecatedTextInputPropTypes.js +++ b/Libraries/DeprecatedPropTypes/DeprecatedTextInputPropTypes.js @@ -41,56 +41,128 @@ module.exports = { 'characters', ]): React$PropType$Primitive<'none' | 'sentences' | 'words' | 'characters'>), /** - * Determines which content to suggest on auto complete, e.g.`username`. - * To disable auto complete, use `off`. + * Specifies autocomplete hints for the system, so it can provide autofill. On Android, the system will always attempt to offer autofill by using heuristics to identify the type of content. + * To disable autocomplete, set `autoComplete` to `off`. * * *Android Only* * - * The following values work on Android only: + * Possible values for `autoComplete` are: * - * - `username` - * - `password` - * - `email` - * - `name` - * - `tel` - * - `street-address` - * - `postal-code` - * - `cc-number` + * - `birthdate-day` + * - `birthdate-full` + * - `birthdate-month` + * - `birthdate-year` * - `cc-csc` * - `cc-exp` + * - `cc-exp-day` * - `cc-exp-month` * - `cc-exp-year` + * - `cc-number` + * - `email` + * - `gender` + * - `name` + * - `name-family` + * - `name-given` + * - `name-middle` + * - `name-middle-initial` + * - `name-prefix` + * - `name-suffix` + * - `password` + * - `password-new` + * - `postal-address` + * - `postal-address-country` + * - `postal-address-extended` + * - `postal-address-extended-postal-code` + * - `postal-address-locality` + * - `postal-address-region` + * - `postal-code` + * - `street-address` + * - `sms-otp` + * - `tel` + * - `tel-country-code` + * - `tel-national` + * - `tel-device` + * - `username` + * - `username-new` * - `off` * * @platform android */ autoComplete: (PropTypes.oneOf([ + 'birthdate-day', + 'birthdate-full', + 'birthdate-month', + 'birthdate-year', 'cc-csc', 'cc-exp', + 'cc-exp-day', 'cc-exp-month', 'cc-exp-year', 'cc-number', 'email', + 'gender', 'name', + 'name-family', + 'name-given', + 'name-middle', + 'name-middle-initial', + 'name-prefix', + 'name-suffix', 'password', + 'password-new', + 'postal-address', + 'postal-address-country', + 'postal-address-extended', + 'postal-address-extended-postal-code', + 'postal-address-locality', + 'postal-address-region', 'postal-code', 'street-address', + 'sms-otp', 'tel', + 'tel-country-code', + 'tel-national', + 'tel-device', 'username', + 'username-new', 'off', ]): React$PropType$Primitive< + | 'birthdate-day' + | 'birthdate-full' + | 'birthdate-month' + | 'birthdate-year' | 'cc-csc' | 'cc-exp' + | 'cc-exp-day' | 'cc-exp-month' | 'cc-exp-year' | 'cc-number' | 'email' + | 'gender' | 'name' + | 'name-family' + | 'name-given' + | 'name-middle' + | 'name-middle-initial' + | 'name-prefix' + | 'name-suffix' | 'password' + | 'password-new' + | 'postal-address' + | 'postal-address-country' + | 'postal-address-extended' + | 'postal-address-extended-postal-code' + | 'postal-address-locality' + | 'postal-address-region' | 'postal-code' | 'street-address' + | 'sms-otp' | 'tel' + | 'tel-country-code' + | 'tel-national' + | 'tel-device' | 'username' + | 'username-new' | 'off', >), /**