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 8083c50b2d3..c44d04400a2 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 @@ -179,6 +179,7 @@ export function StoreAddress( props ) { options={ countryStateOptions } isSearchable { ...getInputProps( 'countryState' ) } + controlClassName={ getInputProps( 'countryState' ).className } > { getCountryStateAutofill( countryStateOptions, diff --git a/plugins/woocommerce-admin/client/dashboard/style.scss b/plugins/woocommerce-admin/client/dashboard/style.scss index 3b52671cedf..47411bd78be 100644 --- a/plugins/woocommerce-admin/client/dashboard/style.scss +++ b/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; diff --git a/plugins/woocommerce-admin/packages/components/src/select-control/control.js b/plugins/woocommerce-admin/packages/components/src/select-control/control.js index 40235f7a275..e5bc22b8af8 100644 --- a/plugins/woocommerce-admin/packages/components/src/select-control/control.js +++ b/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 */