W-12627118 - add autocomplete to text input fields (#1840)

* add autocomplete to text input fields
SalesforceCommerceCloud · Jun 18, 2024 · 85fd4f7 · 85fd4f7
1 parent abbdff7
commit 85fd4f7
Show file tree

Hide file tree

Showing 8 changed files with 25 additions and 0 deletions.
diff --git a/packages/template-retail-react-app/app/components/field/index.jsx b/packages/template-retail-react-app/app/components/field/index.jsx
@@ -32,6 +32,7 @@ const Field = ({
     placeholder,
     inputProps,
     control,
+    autoComplete,
     defaultValue,
     helpText,
     children
@@ -75,6 +76,7 @@ const Field = ({
                                     value={value}
                                     type={inputType}
                                     placeholder={placeholder}
+                                    autoComplete={autoComplete}
                                     {..._inputProps}
                                 />
                             )}
@@ -145,6 +147,7 @@ const Field = ({
 Field.propTypes = {
     name: PropTypes.string,
     label: PropTypes.string,
+    autoComplete: PropTypes.string,
     formLabel: PropTypes.any,
     type: PropTypes.oneOf([
         'text',

diff --git a/packages/template-retail-react-app/app/components/forms/useAddressFields.jsx b/packages/template-retail-react-app/app/components/forms/useAddressFields.jsx
@@ -56,6 +56,7 @@ export default function useAddressFields({
             label: formatMessage(messages.firstName),
             defaultValue: '',
             type: 'text',
+            autoComplete: 'given-name',
             rules: {
                 required: formatMessage({
                     defaultMessage: 'Please enter your first name.',
@@ -70,6 +71,7 @@ export default function useAddressFields({
             label: formatMessage(messages.lastName),
             defaultValue: '',
             type: 'text',
+            autoComplete: 'family-name',
             rules: {
                 required: formatMessage({
                     defaultMessage: 'Please enter your last name.',
@@ -84,6 +86,7 @@ export default function useAddressFields({
             label: formatMessage(messages.phone),
             defaultValue: '',
             type: 'tel',
+            autoComplete: 'tel',
             rules: {
                 required: formatMessage({
                     defaultMessage: 'Please enter your phone number.',
@@ -119,6 +122,7 @@ export default function useAddressFields({
             label: formatMessage(messages.address),
             defaultValue: '',
             type: 'text',
+            autoComplete: 'address-line1',
             rules: {
                 required: formatMessage({
                     defaultMessage: 'Please enter your address.',
@@ -169,6 +173,7 @@ export default function useAddressFields({
             label: formatMessage(countryCode === 'CA' ? messages.postalCode : messages.zipCode),
             defaultValue: '',
             type: 'text',
+            autoComplete: 'postal-code',
             rules: {
                 required:
                     countryCode === 'CA'
@@ -188,6 +193,7 @@ export default function useAddressFields({
             label: formatMessage(messages.preferred),
             defaultValue: false,
             type: 'checkbox',
+            autoComplete: 'honorific-prefix',
             rules: {},
             control
         }

diff --git a/packages/template-retail-react-app/app/components/forms/useCreditCardFields.jsx b/packages/template-retail-react-app/app/components/forms/useCreditCardFields.jsx
@@ -57,6 +57,7 @@ export default function useCreditCardFields({
             label: formatMessage(messages.cardNumber),
             defaultValue: '',
             type: 'text',
+            autoComplete: 'cc-number',
             rules: {
                 required: formatMessage({
                     defaultMessage: 'Please enter your card number.',
@@ -84,6 +85,7 @@ export default function useCreditCardFields({
             label: formatMessage(messages.cardName),
             defaultValue: '',
             type: 'text',
+            autoComplete: 'cc-name',
             rules: {
                 required: formatMessage({
                     defaultMessage: 'Please enter your name as shown on your card.',
@@ -101,6 +103,7 @@ export default function useCreditCardFields({
             label: formatMessage(messages.expiryDate),
             defaultValue: '',
             type: 'text',
+            autoComplete: 'cc-exp',
             placeholder: 'MM/YY',
             rules: {
                 required: formatMessage({
@@ -122,6 +125,8 @@ export default function useCreditCardFields({
             label: formatMessage(messages.securityCode),
             defaultValue: '',
             type: 'password',
+            // turn it off for security
+            autoComplete: 'off',
             rules: {
                 required: formatMessage({
                     defaultMessage: 'Please enter your security code.',

diff --git a/packages/template-retail-react-app/app/components/forms/useLoginFields.jsx b/packages/template-retail-react-app/app/components/forms/useLoginFields.jsx
@@ -21,6 +21,7 @@ export default function useLoginFields({
             placeholder: '[email protected]',
             defaultValue: '',
             type: 'email',
+            autoComplete: 'email',
             rules: {
                 required: formatMessage({
                     defaultMessage: 'Please enter your email address.',

diff --git a/packages/template-retail-react-app/app/components/forms/useProfileFields.jsx b/packages/template-retail-react-app/app/components/forms/useProfileFields.jsx
@@ -24,6 +24,7 @@ export default function useProfileFields({
                 id: 'use_profile_fields.label.first_name'
             }),
             type: 'text',
+            autoComplete: 'given-name',
             defaultValue: '',
             rules: {
                 required: formatMessage({
@@ -42,6 +43,7 @@ export default function useProfileFields({
             }),
             type: 'text',
             defaultValue: '',
+            autoComplete: 'family-name',
             rules: {
                 required: formatMessage({
                     defaultMessage: 'Please enter your last name.',
@@ -57,6 +59,7 @@ export default function useProfileFields({
             placeholder: '[email protected]',
             type: 'email',
             defaultValue: '',
+            autoComplete: 'email',
             rules: {
                 required: formatMessage({
                     defaultMessage: 'Please enter a valid email address.',
@@ -74,6 +77,7 @@ export default function useProfileFields({
             }),
             defaultValue: '',
             type: 'tel',
+            autoComplete: 'tel',
             rules: {
                 required: formatMessage({
                     defaultMessage: 'Please enter your phone number.',

diff --git a/packages/template-retail-react-app/app/components/forms/useRegistrationFields.jsx b/packages/template-retail-react-app/app/components/forms/useRegistrationFields.jsx
@@ -24,6 +24,7 @@ export default function useRegistrationFields({
                 id: 'use_registration_fields.label.first_name'
             }),
             type: 'text',
+            autoComplete: 'given-name',
             defaultValue: '',
             rules: {
                 required: formatMessage({
@@ -42,6 +43,7 @@ export default function useRegistrationFields({
             }),
             type: 'text',
             defaultValue: '',
+            autoComplete: 'family-name',
             rules: {
                 required: formatMessage({
                     defaultMessage: 'Please enter your last name.',
@@ -59,6 +61,7 @@ export default function useRegistrationFields({
             }),
             placeholder: '[email protected]',
             type: 'email',
+            autoComplete: 'email',
             defaultValue: '',
             rules: {
                 required: formatMessage({

diff --git a/packages/template-retail-react-app/app/components/forms/useResetPasswordFields.jsx b/packages/template-retail-react-app/app/components/forms/useResetPasswordFields.jsx
@@ -25,6 +25,7 @@ export default function useResetPasswordFields({
             placeholder: '[email protected]',
             defaultValue: '',
             type: 'email',
+            autoComplete: 'email',
             rules: {
                 required: formatMessage({
                     defaultMessage: 'Please enter a valid email address.',

diff --git a/packages/template-retail-react-app/app/components/forms/useUpdatePasswordFields.jsx b/packages/template-retail-react-app/app/components/forms/useUpdatePasswordFields.jsx
@@ -25,6 +25,7 @@ export default function useUpdatePasswordFields({
             }),
             defaultValue: '',
             type: 'password',
+            autoComplete: 'current-password',
             rules: {
                 required: formatMessage({
                     defaultMessage: 'Please enter your password.',
@@ -41,6 +42,7 @@ export default function useUpdatePasswordFields({
                 id: 'use_update_password_fields.label.new_password'
             }),
             type: 'password',
+            autoComplete: 'new-password',
             defaultValue: '',
             rules: {
                 required: formatMessage({