fix: ensure browser auto-fill inputs into dropdown fields

[samsmith89]

Bug Report

User Story

As a site admin, I want my iPhone users on Safari to have auto-fill populate the dropdown fields from their saved address options so that they can speed up their donation process.

Current Behavior

Currently, the dropdowns are not populating with auto-fill on mobile safari users.

Expected Behavior

I expect to have all the appropriate fields populate with auto-fill when enabled by my donors.

Bug Type

• I am not sure whether this functionality ever worked as expected.

Steps to Reproduce

1. Visit a form on an iPhone
2. Attempt to use auto-fill for the address
3. See that the dropdowns don't populate with the donor information

Visuals

Related

https://secure.helpscout.net/conversation/702144169/28757

Acceptance Criteria

• I can use auto-fill with Safari on iPhone to populate the dropdown address fields.

Environment

Operating System

• Platform: Mac OS X

Browser

• Name: Chrome

WordPress System Info

### WordPress Environment ###

Home URL: http://give.local
Site URL: http://give.local
WP Version: 4.9.8
WP Multisite: –
WP Memory Limit: 256 MB
WP Debug Mode: –
WP Cron: ✔
Language: en_US
Permalink Structure: /%postname%/
Show on Front: posts
Table Prefix Length: wp_
Table Prefix Length: 3
Table Prefix Status: Acceptable
Admin AJAX: Accessible
Registered Post Statuses: publish, future, draft, pending, private, trash, auto-draft, inherit, request-pending, request-confirmed, request-failed, request-completed, in-progress, failed, wc-pending, wc-processing, wc-on-hold, wc-completed, wc-cancelled, wc-refunded, wc-failed, refunded, revoked, cancelled, abandoned, processing, preapproval, give_subscription

Server Environment

Hosting Provider: DBH: localhost, SRV: give.local
TLS Connection: Connection uses TLS 1.2
TLS Connection: Probably Okay
Server Info: Apache/2.4.10 (Debian)
PHP Version: 7.1.4
PHP Post Max Size: 1,000 MB
PHP Time Limit: 900
PHP Max Input Vars: 3000
PHP Max Upload Size: 1,000 MB
cURL Version: ❌ 7.38.0, OpenSSL/1.0.1t - We recommend a minimum cURL version of 7.40.
SUHOSIN Installed: –
MySQL Version: 5.6.34
Default Timezone is UTC: ✔
fsockopen/cURL: ✔
SoapClient: ✔
DOMDocument: ✔
gzip: ✔
GD Graphics Library: ✔
Multibyte String: ✔
Remote Post: ✔
Remote Get: ✔

Give Configuration

Give Version: 2.3.0
Give Cache: Enabled
Database Updates: All DB Updates Completed.
Give Cache: Enabled
Give Cache: ✔New Donation✔Donation Receipt✔New Offline Donation✔Offline Donation Instructions✔New User Registration✔User Registration Information✔Donor Note✔Email access✔Daily Email Report✔Weekly Email Report✔Monthly Email Report✔Renewal Receipt Email✔Subscription Cancelled Email❌Subscription Completed Email✔Subscription Reminder Email✔Subscriptions Email Access
Upgraded From: 2.2.3
Test Mode: Enabled
Currency Code: USD
Currency Position: Before
Decimal Separator: .
Thousands Separator: ,
Success Page: http://give.local/donation-confirmation/
Failure Page: http://give.local/donation-failed/
Donation History Page: http://give.local/donation-history/
Give Forms Slug: /donations/
Enabled Payment Gateways: PayPal Standard, Test Donation, Offline Donation, Stripe - Credit Card, Authorize.net
Default Payment Gateway: PayPal Standard
PayPal IPN Verification: Disabled
PayPal IPN Notifications: N/A
Donor Email Access: Enabled

Active Give Add-ons

Give - Authorize.net Gateway: ✔ Licensed – by WordImpress – 1.4.3
Give - Braintree Gateway: ✔ Licensed – by WordImpress – 1.2.2
Give - CCAvenue Gateway: ✔ Licensed – by WordImpress – 1.0.2
Give - Email Reports: ✔ Licensed – by WordImpress – 1.1.2
Give - Fee Recovery: ❌ Unlicensed – by GiveWP – 1.7.2
Give - Form Field Manager: ❌ Unlicensed – by GiveWP – 1.4.0
Give - GoCardless Gateway: ❌ Unlicensed – by WordImpress – 1.2.1
Give - Google Analytics Donation Tracking: ❌ Unlicensed – by GiveWP – 1.2.1
Give - MailChimp: ✔ Licensed – by WordImpress – 1.4.1
Give - Manual Donations: ✔ Licensed – by WordImpress – 1.4.1
Give - PayPal Pro Gateway: ❌ Unlicensed – by GiveWP – 1.2.0
Give - Paytm Gateway: ✔ Licensed – by WordImpress – 1.0.1
Give - PDF Receipts: ✔ Licensed – by WordImpress – 2.3
Give - Razorpay: ❌ Unlicensed – by WordImpress – 1.2.0
Give - Recurring Donations: ❌ Unlicensed – by GiveWP – 1.8.1
Give - Stripe Gateway: ❌ Unlicensed – by GiveWP – 2.1.1
Give - Tributes: ✔ Licensed – by WordImpress – 1.5.0
Sam's Helper Function: ❌ Unlicensed – by WordImpress – 1.0

Other Active Plugins

Give - Hook Helper: by Ravinder Kumar – 1.0
Gutenberg: by Gutenberg Team – 4.1.1
Search & Filter: by Designs & Code – 1.2.10
Search Exclude: by Roman Pronskiy – 1.2.2
Transients Manager: by Pippin Williamson – 1.7.5
WooCommerce: by Automattic – 3.5.0

Inactive Plugins

All-in-One WP Migration: by ServMask – 6.78
Contact Form 7: by Takayuki Miyoshi – 5.0.4
Give - Donation Upsells for WooCommerce: by WordImpress – 1.0.4
Give - Gift Aid: by WordImpress – 1.1.6
Intelligence: by LevelTen – 1.3.1
Invisible reCaptcha: by Mihai Chelaru – 1.2.1
The Events Calendar: by Modern Tribe, Inc. – 4.6.25
The Events Calendar: Eventbrite Tickets: by Modern Tribe, Inc. – 4.5.5
User Role Editor: by Vladimir Garagulya – 4.46
WordPress Importer: by wordpressdotorg – 0.6.4
WP Business Reviews: by Impress.org – 1.0.0

Active MU Plugins

Bypass Login: by Stephen Carnam – 1.1.0

Theme

Name: Twenty Seventeen
Version: 1.7
Author URL: https://wordpress.org/
Child Theme: No – If you're modifying Give on a parent theme you didn't build personally, then we recommend using a child theme. See: How to Create a Child Theme

[kevinwhoffman]

Slack Call Summary

Participants: @nishitlangaliya @kevinwhoffman
Topic: Review iPhone autofill behavior
Result: Nishit demonstrated how the iPhone uses existing contact info from the address book to populate form data. Most fields seem to work except for state and country. He also showed that some countries worked while others did not. For example Afghanistan did autofill, but United States did not.

@DevinWalker I found the same behavior that Nishit did, and we think it may be due to a mismatch in the value of the iPhone contact compared to the option in the form (e.g. United States is not being matched to US).

We should also review the autocomplete parameters used in each field as I see we are using autocomplete="address-level4" for State while Google recommends autocomplete="address-level1" according to the WHATWG HTML Standard.

• https://developers.google.com/web/fundamentals/design-and-ux/input/forms/#recommended_input_name_and_autocomplete_attribute_values
• https://html.spec.whatwg.org/multipage/forms.html#autofill

[DevinWalker]

@kevinwhoffman I'm on board with whatever we can do to improve the autofill functionality and make it as consistent and compliant as possible cross-browser.

[kevinwhoffman]

@nishitlangaliya Please continue on this issue. Review the autocomplete recommendations as provided by Google in this document: https://developers.google.com/web/fundamentals/design-and-ux/input/forms/#recommended_input_name_and_autocomplete_attribute_values

1. Review each field in Give core and ensure the autocomplete values match the values recommended by Google.
2. Once that is done test the autocomplete functionality in each browser:
   • Chrome (Desktop)
   • Safari (Desktop)
   • Firefox (Desktop)
   • Edge (Desktop)
   • Chrome (Mobile)
   • Safari (Mobile)
3. Copy and paste a report in the issue below for each browser using the following template.

Chrome (Desktop)

Version 71.0.3578.98 (Official Build) (64-bit)
Operating System: Windows 10
Fields:

• First Name
• Last Name
• Company Name
• Email
• Country
• Address Line 1
• Address Line 2
• City
• State
• Postal Code

Firefox (Desktop) and Mobile:

Operating System: Windows 10

• Autofill not supported

Safari (Desktop)

Version 9.1.2 (11601.7.7)
Operating System: Mac Mini el capitan ( 10.11.6 )

• Autofill not Working

Edge (Desktop)

Operating System: Windows 10
Microsoft Edge 42.17134.1.0

• Autofill not Working
• We have to first pre save form data in browser settings

Safari (Mobile)

• First Name
• Last Name
• Company Name
• Email
• Country
• Address Line 1
• Address Line 2
• City
• State
• Postal Code

Chrome (Mobile)

• Autofill not Working