feat: add autocomplete attributes on passwordless form fields (#747)

* feat: add autocomplete attributes on passwordless form fields * chore: bump version --------- Co-authored-by: Rishabh Poddar <rishabh.poddar@gmail.com>
supertokens · Oct 6, 2023 · efef688 · efef688
1 parent 77ea80d
commit efef688
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,7 +5,11 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html)
 
-## [0.35.5] - 2023-10-05
+## [0.35.5] - 2023-10-06
+
+### Changes
+
+-   Setting `autocomplete` in passwordless forms for email, phone and OTP
 
 ### Fixes
 

diff --git a/lib/build/passwordless-shared3.js b/lib/build/passwordless-shared3.js
diff --git a/lib/ts/recipe/passwordless/components/themes/signInUp/emailForm.tsx b/lib/ts/recipe/passwordless/components/themes/signInUp/emailForm.tsx
@@ -40,6 +40,7 @@ export const EmailForm = withOverride(
                         optional: false,
                         autofocus: true,
                         placeholder: "",
+                        autoComplete: "email",
                         // We are using the default validator that allows any string
                         validate: defaultValidate,
                     },

diff --git a/lib/ts/recipe/passwordless/components/themes/signInUp/emailOrPhoneForm.tsx b/lib/ts/recipe/passwordless/components/themes/signInUp/emailOrPhoneForm.tsx
@@ -59,6 +59,9 @@ export const EmailOrPhoneForm = withOverride(
                         optional: false,
                         autofocus: true,
                         placeholder: "",
+                        // We do not add an autocomplete prop in this case, since we do not really have any sensible option to set
+                        // Setting them to either "tel" or "email" would give people the wrong impression since this could have either
+                        // AFAIK we can't set them both at the same time
                         validate: defaultValidate,
                     },
                 ]}

diff --git a/lib/ts/recipe/passwordless/components/themes/signInUp/phoneForm.tsx b/lib/ts/recipe/passwordless/components/themes/signInUp/phoneForm.tsx
@@ -56,6 +56,7 @@ export const PhoneForm = withOverride(
                         optional: false,
                         autofocus: true,
                         placeholder: "",
+                        autoComplete: "tel",
                         validate: defaultValidate,
                     },
                 ]}

diff --git a/lib/ts/recipe/passwordless/components/themes/signInUp/userInputCodeForm.tsx b/lib/ts/recipe/passwordless/components/themes/signInUp/userInputCodeForm.tsx
@@ -121,6 +121,7 @@ export const UserInputCodeForm = withOverride(
                             autofocus: true,
                             optional: false,
                             clearOnSubmit: true,
+                            autoComplete: "one-time-code",
                             placeholder: "",
                             validate: userInputCodeValidate,
                         },