From 94356e14ec0562a1fd5a208d93021f102ba9565e Mon Sep 17 00:00:00 2001 From: Kyle Roach Date: Tue, 18 Apr 2023 10:11:53 -0700 Subject: [PATCH] fix(types): cross platform autoComplete for TextInput (#36931) Summary: Since v0.71 the autoComplete prop on TextInput is available on iOS ([release notes](https://reactnative.dev/blog/2023/01/12/version-071#component-specific-behavior)). However, this change is not reflected in the types. Original types PR here - https://github.com/DefinitelyTyped/DefinitelyTyped/pull/65144 by chwallen ## Changelog: [GENERAL] [FIXED] - Fix autoComplete type for TextInput Pull Request resolved: https://github.com/facebook/react-native/pull/36931 Test Plan: Setting the autoComplete prop on TextInput to `nickname`, `organization`, `organization-title`, or `url` should not result in typescript errors. Reviewed By: NickGerleman Differential Revision: D45052350 Pulled By: javache fbshipit-source-id: 40993833b4ed14f91e3bf3521a264ea93517a0c9 --- .../Components/TextInput/TextInput.d.ts | 207 ++++++++------ .../Components/TextInput/TextInput.flow.js | 256 +++++++++--------- .../Components/TextInput/TextInput.js | 256 +++++++++--------- 3 files changed, 363 insertions(+), 356 deletions(-) diff --git a/packages/react-native/Libraries/Components/TextInput/TextInput.d.ts b/packages/react-native/Libraries/Components/TextInput/TextInput.d.ts index 1a5ce640b225b3..ff029fb29b5f8c 100644 --- a/packages/react-native/Libraries/Components/TextInput/TextInput.d.ts +++ b/packages/react-native/Libraries/Components/TextInput/TextInput.d.ts @@ -289,92 +289,6 @@ export interface TextInputIOSProps { * @see https://reactnative.dev/docs/textinput#props */ export interface TextInputAndroidProps { - /** - * 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* - * - * Possible values for `autoComplete` are: - * - * - `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` - */ - autoComplete?: - | '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' - | undefined; - /** * When provided it will set the color of the cursor (or "caret") in the component. * Unlike the behavior of `selectionColor` the cursor color will be set independently @@ -558,6 +472,127 @@ export interface TextInputProps */ autoCapitalize?: 'none' | 'sentences' | 'words' | 'characters' | undefined; + /** + * 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. + * + * The following values work across platforms: + * + * - `additional-name` + * - `address-line1` + * - `address-line2` + * - `cc-number` + * - `country` + * - `current-password` + * - `email` + * - `family-name` + * - `given-name` + * - `honorific-prefix` + * - `honorific-suffix` + * - `name` + * - `new-password` + * - `off` + * - `one-time-code` + * - `postal-code` + * - `street-address` + * - `tel` + * - `username` + * + * The following values work on iOS only: + * + * - `nickname` + * - `organization` + * - `organization-title` + * - `url` + * + * The following values work on Android only: + * + * - `birthdate-day` + * - `birthdate-full` + * - `birthdate-month` + * - `birthdate-year` + * - `cc-csc` + * - `cc-exp` + * - `cc-exp-day` + * - `cc-exp-month` + * - `cc-exp-year` + * - `gender` + * - `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` + * - `sms-otp` + * - `tel-country-code` + * - `tel-national` + * - `tel-device` + * - `username-new` + */ + autoComplete?: + | 'additional-name' + | 'address-line1' + | 'address-line2' + | 'birthdate-day' + | 'birthdate-full' + | 'birthdate-month' + | 'birthdate-year' + | 'cc-csc' + | 'cc-exp' + | 'cc-exp-day' + | 'cc-exp-month' + | 'cc-exp-year' + | 'cc-number' + | 'country' + | 'current-password' + | 'email' + | 'family-name' + | 'gender' + | 'given-name' + | 'honorific-prefix' + | 'honorific-suffix' + | 'name' + | 'name-family' + | 'name-given' + | 'name-middle' + | 'name-middle-initial' + | 'name-prefix' + | 'name-suffix' + | 'new-password' + | 'nickname' + | 'one-time-code' + | 'organization' + | 'organization-title' + | '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' + | 'url' + | 'username' + | 'username-new' + | 'off' + | undefined; + /** * If false, disables auto-correct. * The default value is true. diff --git a/packages/react-native/Libraries/Components/TextInput/TextInput.flow.js b/packages/react-native/Libraries/Components/TextInput/TextInput.flow.js index 40a3fb809daed0..7ed4579d4d87c8 100644 --- a/packages/react-native/Libraries/Components/TextInput/TextInput.flow.js +++ b/packages/react-native/Libraries/Components/TextInput/TextInput.flow.js @@ -196,36 +196,6 @@ export type enterKeyHintType = type PasswordRules = string; type IOSProps = $ReadOnly<{| - /** - * Give the keyboard and the system information about the - * expected semantic meaning for the content that users enter. - * @platform ios - */ - autoComplete?: ?( - | 'address-line1' - | 'address-line2' - | 'cc-number' - | 'current-password' - | 'country' - | 'email' - | 'name' - | 'additional-name' - | 'family-name' - | 'given-name' - | 'nickname' - | 'honorific-prefix' - | 'honorific-suffix' - | 'new-password' - | 'off' - | 'one-time-code' - | 'organization' - | 'organization-title' - | 'postal-code' - | 'street-address' - | 'tel' - | 'url' - | 'username' - ), /** * When the clear button should appear on the right side of the text view. * This property is supported only for single-line TextInput component. @@ -328,111 +298,6 @@ type IOSProps = $ReadOnly<{| |}>; type AndroidProps = $ReadOnly<{| - /** - * 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* - * - * Possible values for `autoComplete` are: - * - * - `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?: ?( - | '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' - // additional HTML autocomplete values - | 'address-line1' - | 'address-line2' - | 'bday' - | 'bday-day' - | 'bday-month' - | 'bday-year' - | 'country' - | 'current-password' - | 'honorific-prefix' - | 'honorific-suffix' - | 'additional-name' - | 'family-name' - | 'given-name' - | 'new-password' - | 'one-time-code' - | 'sex' - ), - /** * When provided it will set the color of the cursor (or "caret") in the component. * Unlike the behavior of `selectionColor` the cursor color will be set independently @@ -533,6 +398,127 @@ export type Props = $ReadOnly<{| */ autoCapitalize?: ?AutoCapitalize, + /** + * 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. + * + * The following values work across platforms: + * + * - `additional-name` + * - `address-line1` + * - `address-line2` + * - `cc-number` + * - `country` + * - `current-password` + * - `email` + * - `family-name` + * - `given-name` + * - `honorific-prefix` + * - `honorific-suffix` + * - `name` + * - `new-password` + * - `off` + * - `one-time-code` + * - `postal-code` + * - `street-address` + * - `tel` + * - `username` + * + * The following values work on iOS only: + * + * - `nickname` + * - `organization` + * - `organization-title` + * - `url` + * + * The following values work on Android only: + * + * - `birthdate-day` + * - `birthdate-full` + * - `birthdate-month` + * - `birthdate-year` + * - `cc-csc` + * - `cc-exp` + * - `cc-exp-day` + * - `cc-exp-month` + * - `cc-exp-year` + * - `gender` + * - `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` + * - `sms-otp` + * - `tel-country-code` + * - `tel-national` + * - `tel-device` + * - `username-new` + */ + autoComplete?: ?( + | 'additional-name' + | 'address-line1' + | 'address-line2' + | 'birthdate-day' + | 'birthdate-full' + | 'birthdate-month' + | 'birthdate-year' + | 'cc-csc' + | 'cc-exp' + | 'cc-exp-day' + | 'cc-exp-month' + | 'cc-exp-year' + | 'cc-number' + | 'country' + | 'current-password' + | 'email' + | 'family-name' + | 'gender' + | 'given-name' + | 'honorific-prefix' + | 'honorific-suffix' + | 'name' + | 'name-family' + | 'name-given' + | 'name-middle' + | 'name-middle-initial' + | 'name-prefix' + | 'name-suffix' + | 'new-password' + | 'nickname' + | 'one-time-code' + | 'organization' + | 'organization-title' + | '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' + | 'url' + | 'username' + | 'username-new' + | 'off' + ), + /** * If `false`, disables auto-correct. The default value is `true`. */ diff --git a/packages/react-native/Libraries/Components/TextInput/TextInput.js b/packages/react-native/Libraries/Components/TextInput/TextInput.js index bfbf89b3a05e86..dce846b59369a3 100644 --- a/packages/react-native/Libraries/Components/TextInput/TextInput.js +++ b/packages/react-native/Libraries/Components/TextInput/TextInput.js @@ -234,36 +234,6 @@ export type enterKeyHintType = type PasswordRules = string; type IOSProps = $ReadOnly<{| - /** - * Give the keyboard and the system information about the - * expected semantic meaning for the content that users enter. - * @platform ios - */ - autoComplete?: ?( - | 'address-line1' - | 'address-line2' - | 'cc-number' - | 'current-password' - | 'country' - | 'email' - | 'name' - | 'additional-name' - | 'family-name' - | 'given-name' - | 'nickname' - | 'honorific-prefix' - | 'honorific-suffix' - | 'new-password' - | 'off' - | 'one-time-code' - | 'organization' - | 'organization-title' - | 'postal-code' - | 'street-address' - | 'tel' - | 'url' - | 'username' - ), /** * When the clear button should appear on the right side of the text view. * This property is supported only for single-line TextInput component. @@ -369,111 +339,6 @@ type IOSProps = $ReadOnly<{| |}>; type AndroidProps = $ReadOnly<{| - /** - * 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* - * - * Possible values for `autoComplete` are: - * - * - `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?: ?( - | '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' - // additional HTML autocomplete values - | 'address-line1' - | 'address-line2' - | 'bday' - | 'bday-day' - | 'bday-month' - | 'bday-year' - | 'country' - | 'current-password' - | 'honorific-prefix' - | 'honorific-suffix' - | 'additional-name' - | 'family-name' - | 'given-name' - | 'new-password' - | 'one-time-code' - | 'sex' - ), - /** * When provided it will set the color of the cursor (or "caret") in the component. * Unlike the behavior of `selectionColor` the cursor color will be set independently @@ -574,6 +439,127 @@ export type Props = $ReadOnly<{| */ autoCapitalize?: ?AutoCapitalize, + /** + * 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. + * + * The following values work across platforms: + * + * - `additional-name` + * - `address-line1` + * - `address-line2` + * - `cc-number` + * - `country` + * - `current-password` + * - `email` + * - `family-name` + * - `given-name` + * - `honorific-prefix` + * - `honorific-suffix` + * - `name` + * - `new-password` + * - `off` + * - `one-time-code` + * - `postal-code` + * - `street-address` + * - `tel` + * - `username` + * + * The following values work on iOS only: + * + * - `nickname` + * - `organization` + * - `organization-title` + * - `url` + * + * The following values work on Android only: + * + * - `birthdate-day` + * - `birthdate-full` + * - `birthdate-month` + * - `birthdate-year` + * - `cc-csc` + * - `cc-exp` + * - `cc-exp-day` + * - `cc-exp-month` + * - `cc-exp-year` + * - `gender` + * - `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` + * - `sms-otp` + * - `tel-country-code` + * - `tel-national` + * - `tel-device` + * - `username-new` + */ + autoComplete?: ?( + | 'additional-name' + | 'address-line1' + | 'address-line2' + | 'birthdate-day' + | 'birthdate-full' + | 'birthdate-month' + | 'birthdate-year' + | 'cc-csc' + | 'cc-exp' + | 'cc-exp-day' + | 'cc-exp-month' + | 'cc-exp-year' + | 'cc-number' + | 'country' + | 'current-password' + | 'email' + | 'family-name' + | 'gender' + | 'given-name' + | 'honorific-prefix' + | 'honorific-suffix' + | 'name' + | 'name-family' + | 'name-given' + | 'name-middle' + | 'name-middle-initial' + | 'name-prefix' + | 'name-suffix' + | 'new-password' + | 'nickname' + | 'one-time-code' + | 'organization' + | 'organization-title' + | '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' + | 'url' + | 'username' + | 'username-new' + | 'off' + ), + /** * If `false`, disables auto-correct. The default value is `true`. */