diff --git a/plugins/woocommerce-admin/client/dashboard/components/settings/general/store-address.js b/plugins/woocommerce-admin/client/dashboard/components/settings/general/store-address.js index b2c4ec8fa79..8083c50b2d3 100644 --- a/plugins/woocommerce-admin/client/dashboard/components/settings/general/store-address.js +++ b/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( - escapeRegExp( autofillCountry.replace( /\s/g, '' ) ), - 'i' - ); - filteredOptions = options.filter( option => - countrySearch.test( option.label.replace( '-', '' ).replace( /\s/g, '' ) ) - ); + filteredOptions = options.filter( option => countrySearch.test( option.label ) ); } 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" /> ); @@ -146,12 +162,14 @@ export function StoreAddress( props ) { @@ -173,11 +191,13 @@ export function StoreAddress( props ) { label={ __( 'City', 'woocommerce-admin' ) } required { ...getInputProps( 'city' ) } + autoComplete="address-level2" />