Add autocomplete props to address fields in onboarding and adjust country/state matching (https://github.com/woocommerce/woocommerce-admin/pull/3338)

* Add autocomplete props to adress fields in onboarding

* Adjust state/country autocomplete logic

* Refactor state and country check

plugins/woocommerce-admin/client/dashboard/components/settings/general/store-address.js

@@ -86,21 +86,35 @@ export function getCountryStateAutofill( options, countryState, setValue ) {
 	useEffect(
 		() => {
 			let filteredOptions = [];
+			const countrySearch = new RegExp( escapeRegExp( autofillCountry ), 'i' );
 			if ( autofillState.length || autofillCountry.length ) {
-				const countrySearch = new RegExp(
+				filteredOptions = options.filter( option => countrySearch.test( option.label ) );
-					escapeRegExp( autofillCountry.replace( /\s/g, '' ) ),
-					'i'
-				);
-				filteredOptions = options.filter( option =>
-					countrySearch.test( option.label.replace( '-', '' ).replace( /\s/g, '' ) )
-				);
 			}
 			if ( autofillCountry.length && autofillState.length ) {
 				const stateSearch = new RegExp( escapeRegExp( autofillState.replace( /\s/g, '' ) ), 'i' );
 				filteredOptions = filteredOptions.filter( option =>
 					stateSearch.test( option.label.replace( '-', '' ).replace( /\s/g, '' ) )
 				);
+
+				if ( filteredOptions.length > 1 ) {
+					let countryKeyOptions = [];
+					countryKeyOptions = filteredOptions.filter( option => countrySearch.test( option.key ) );
+
+					if ( countryKeyOptions.length > 0 ) {
+						filteredOptions = countryKeyOptions;
+					}
+				}
+
+				if ( filteredOptions.length > 1 ) {
+					let stateKeyOptions = [];
+					stateKeyOptions = filteredOptions.filter( option => stateSearch.test( option.key ) );
+
+					if ( 1 === stateKeyOptions.length ) {
+						filteredOptions = stateKeyOptions;
+					}
+				}
 			}
+
 			if ( 1 === filteredOptions.length && countryState !== filteredOptions[ 0 ].key ) {
 				setValue( 'countryState', filteredOptions[ 0 ].key );
 			}
@@ -117,6 +131,7 @@ export function getCountryStateAutofill( options, countryState, setValue ) {
 				type="text"
 				className="woocommerce-select-control__autofill-input"
 				tabIndex="-1"
+				autoComplete="country"
 			/>
 
 			<input
@@ -126,6 +141,7 @@ export function getCountryStateAutofill( options, countryState, setValue ) {
 				type="text"
 				className="woocommerce-select-control__autofill-input"
 				tabIndex="-1"
+				autoComplete="address-level1"
 			/>
 		</Fragment>
 	);
@@ -146,12 +162,14 @@ export function StoreAddress( props ) {
 			<TextControl
 				label={ __( 'Address line 1', 'woocommerce-admin' ) }
 				required
+				autoComplete="address-line1"
 				{ ...getInputProps( 'addressLine1' ) }
 			/>
 
 			<TextControl
 				label={ __( 'Address line 2 (optional)', 'woocommerce-admin' ) }
 				required
+				autoComplete="address-line2"
 				{ ...getInputProps( 'addressLine2' ) }
 			/>
 
@@ -173,11 +191,13 @@ export function StoreAddress( props ) {
 				label={ __( 'City', 'woocommerce-admin' ) }
 				required
 				{ ...getInputProps( 'city' ) }
+				autoComplete="address-level2"
 			/>
 
 			<TextControl
 				label={ __( 'Post code', 'woocommerce-admin' ) }
 				required
+				autoComplete="postal-code"
 				{ ...getInputProps( 'postCode' ) }
 			/>
 		</div>