Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Warning: Failed prop type: Invalid prop autoComplete of value password-new #32557

Closed
TheWirv opened this issue Nov 8, 2021 · 9 comments
Closed
Labels
Needs: Triage 🔍 Stale There has been a lack of activity on this issue and it may be closed soon.

Comments

@TheWirv
Copy link
Contributor

TheWirv commented Nov 8, 2021

Description

I am getting this warning when supplying the value 'password-new' to TextInput's autoComplete prop, although this is supported, as per the latest docs. This is the full warning:

Warning: Failed prop type: Invalid prop `autoComplete` of value `password-new` supplied to `ForwardRef(TextInput)`, expected one of 
["cc-csc","cc-exp","cc-exp-month","cc-exp-year","cc-number","email","name","password","postal-code","street-address","tel","username","off"].
[...Stack trace]

I am guessing this is because of the type discrepancies between the JS and native component files.

Version

0.66.2

Output of react-native info

System:
    OS: Windows 10 10.0.19043
    CPU: (12) x64 Intel(R) Core(TM) i7-8700K CPU @ 3.70GHz
    Memory: 13.70 GB / 31.68 GB
  Binaries:
    Node: 16.12.0 - ~\AppData\Local\Temp\yarn--1636384436565-0.4897942578758505\node.CMD 
    Yarn: 1.22.15 - ~\AppData\Local\Temp\yarn--1636384436565-0.4897942578758505\yarn.CMD 
    npm: 8.1.1 - C:\Program Files\nodejs\npm.CMD
    Watchman: 20210110.135312.0 - C:\Users\mlasaj\AppData\Local\Watchman\bin\watchman.EXE
  SDKs:
    Android SDK:
      API Levels: 30
      Build Tools: 30.0.2, 30.0.3, 32.0.0
      System Images: android-30 | Google APIs Intel x86 Atom_64
      Android NDK: Not Found
    Windows SDK:
      AllowAllTrustedApps: Disabled
      Versions: 10.0.14393.0, 10.0.19041.0
  IDEs:
    Android Studio: Version     2020.3.0.0 AI-203.7717.56.2031.7784292
    Visual Studio: 16.11.31624.102 (Visual Studio Enterprise 2019)
  Languages:
    Java: 13.0.2
  npmPackages:
    @react-native-community/cli: Not Found
    react: Not Found
    react-native: Not Found
    react-native-windows: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps to reproduce

  1. Install RN v0.66.2 on Android
  2. Create TextInput component
  3. Add autoComplete prop with value 'password-new'

Snack, code example, screenshot, or link to a repository

Screenshot_1636384608

@TheWirv
Copy link
Contributor Author

TheWirv commented Nov 10, 2021

My assumption that the culprit was the difference between TextInput and AndroidTextInputNativeComponent was wrong. It was actually DeprecatedTextInputPropTypes, and I fixed it and created a PR #32575 for it.

facebook-github-bot pushed a commit that referenced this issue Nov 11, 2021
…Complete values (#32575)

Summary:
<!-- Explain the **motivation** for making this change. What existing problem does the pull request solve? -->
This fixes the "Failed prop type: Invalid prop `autoComplete` of value `[any-of-the-new-values]`" warning, as mentioned in #32557.

[This commit](d9e0ea7) 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

<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://github.com/facebook/react-native/wiki/Changelog
-->

[Android] [Fixed] - Updated TextInput prop types to accomodate for new autoComplete values

Pull Request resolved: #32575

Test Plan: There is no warning after these changes.

Reviewed By: yungsters

Differential Revision: D32324108

Pulled By: lunaleaps

fbshipit-source-id: df27cbbd54788f26471029c9201c6a27ca8b7893
@ghost
Copy link

ghost commented Jan 24, 2022

@TheWirv I still see this error with 'sms-otp' value in 0.67.1 🤔

@itsjaychang
Copy link

@TheWirv I still see this error with 'sms-otp' value in 0.67.1 🤔

The warning seems to be fixed with 0.68 with 9eb0881

With that said, is anyone able to get the sms-opt prop to work? I am unable to have it populate the text field with a SMS with the app hash on the sim

@ghost
Copy link

ghost commented Mar 28, 2022

@itsjaychang Yeah we got it working. Make sure you set importantForAutofill to true :) and double check the spelling it is otp not opt - just in case you never now

@canerd7u
Copy link

canerd7u commented Apr 5, 2022

@itsjaychang Yeah we got it working. Make sure you set importantForAutofill to true :) and double check the spelling it is otp not opt - just in case you never now

Hello, How to use it ? i create new RN project with 0.68 version. and i dont how to try this sms-otp ? i open emulator and try sms similator ?

@ghost
Copy link

ghost commented Apr 5, 2022

@canerd7u

To test it out on simulator make sure you are signed in with your google account in simulator, then navigate to settings / privacy settings and there you should see autofill, make sure it is enabled... Another way should be to install some other 3rd party service on your phone which will manage autofill stuff and to test it out with that...

@dusan-ygii
Copy link

@itsjaychang Yeah we got it working. Make sure you set importantForAutofill to true :) and double check the spelling it is otp not opt - just in case you never now

than you very much but actually it is not set to true but :

importantForAutofill="yes"

Copy link

github-actions bot commented Apr 2, 2024

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

@github-actions github-actions bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Apr 2, 2024
Copy link

This issue was closed because it has been stalled for 7 days with no activity.

@github-actions github-actions bot closed this as not planned Won't fix, can't repro, duplicate, stale Apr 10, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Needs: Triage 🔍 Stale There has been a lack of activity on this issue and it may be closed soon.
Projects
None yet
Development

No branches or pull requests

4 participants