Onboarding: Add error styling and text to country state dropdown (https://github.com/woocommerce/woocommerce-admin/pull/3494)

* Add onBlur prop to select control input

* Add controlCLassName prop to SelectControl

* Set left position for control help text explicitly

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

@@ -179,6 +179,7 @@ export function StoreAddress( props ) {
 				options={ countryStateOptions }
 				isSearchable
 				{ ...getInputProps( 'countryState' ) }
+				controlClassName={ getInputProps( 'countryState' ).className }
 			>
 				{ getCountryStateAutofill(
 					countryStateOptions,

plugins/woocommerce-admin/client/dashboard/style.scss

@@ -115,6 +115,7 @@
 
 		.components-base-control__help {
 			top: 100%;
+			left: $gap-small;
 			position: absolute;
 			margin-top: $gap-smallest;
 			font-size: 12px;

plugins/woocommerce-admin/packages/components/src/select-control/control.js

@@ -51,6 +51,12 @@ class Control extends Component {
 	}
 
 	onBlur() {
+		const { onBlur } = this.props;
+
+		if ( 'function' === typeof onBlur ) {
+			onBlur();
+		}
+
 		this.setState( { isActive: false } );
 	}
 
@@ -151,7 +157,7 @@ class Control extends Component {
 	}
 
 	render() {
-		const { hasTags, help, inlineTags, instanceId, isSearchable, label, query } = this.props;
+		const { className, hasTags, help, inlineTags, instanceId, isSearchable, label, query } = this.props;
 		const { isActive } = this.state;
 
 		return (
@@ -162,7 +168,7 @@ class Control extends Component {
 			// for the benefit of sighted users.
 			/* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
 			<div
-				className={ classnames( 'components-base-control', 'woocommerce-select-control__control', {
+				className={ classnames( 'components-base-control', 'woocommerce-select-control__control', className, {
 					empty: ! query.length,
 					'is-active': isActive,
 					'has-tags': inlineTags && hasTags,
@@ -234,6 +240,10 @@ Control.propTypes = {
 	 * ID used for a11y in the listbox.
 	 */
 	listboxId: PropTypes.string,
+	/**
+	 * Function called when the input is blurred.
+	 */
+	onBlur: PropTypes.func,
 	/**
 	 * Function called when selected results change, passed result list.
 	 */

plugins/woocommerce-admin/packages/components/src/select-control/index.js

@@ -242,6 +242,7 @@ export class SelectControl extends Component {
 			autofill,
 			children,
 			className,
+			controlClassName,
 			inlineTags,
 			instanceId,
 			isSearchable,
@@ -279,6 +280,7 @@ export class SelectControl extends Component {
 					{ ...this.props }
 					{ ...this.state }
 					activeId={ activeId }
+					className={ controlClassName }
 					hasTags={ hasTags }
 					isExpanded={ isExpanded }
 					listboxId={ listboxId }
@@ -322,6 +324,10 @@ SelectControl.propTypes = {
 	 * Class name applied to parent div.
 	 */
 	className: PropTypes.string,
+	/**
+	 * Class name applied to control wrapper.
+	 */
+	controlClassName: PropTypes.string,
 	/**
 	 * Exclude already selected options from the options list.
 	 */