Removing focus style on blur - Web/Desktop

src/components/AddPlaidBankAccount.js

@@ -118,6 +118,7 @@ class AddPlaidBankAccount extends React.Component {
         this.clearError = inputKey => ReimbursementAccountUtils.clearError(this.props, inputKey);
         this.getErrorText = inputKey => ReimbursementAccountUtils.getErrorText(this.props, {
             password: 'passwordForm.error.incorrectPassword',
+            selectedBank: 'bankAccount.error.noBankAccountSelected',
         }, inputKey);
     }
 
@@ -253,7 +254,7 @@ class AddPlaidBankAccount extends React.Component {
                                     label: this.props.translate('bankAccount.chooseAnAccount'),
                                 } : {}}
                                 value={this.state.selectedIndex}
-                                hasError={this.getErrors().selectedBank}
+                                errorText={this.getErrorText('selectedBank')}
                             />
                         </View>
                         {!_.isUndefined(this.state.selectedIndex) && this.props.isPasswordRequired && (

src/components/Picker/BasePicker/basePickerPropTypes.js

@@ -11,8 +11,8 @@ const propTypes = {
     /** Whether or not to show the disabled styles */
     disabled: PropTypes.bool,
 
-    /** Should the picker be styled for errors  */
-    hasError: PropTypes.bool,
+    /** Error text to display */
+    errorText: PropTypes.string,
 
     /** Should the picker be styled for focus state  */
     focused: PropTypes.bool,
@@ -43,10 +43,19 @@ const propTypes = {
 
     /** Size of a picker component */
     size: PropTypes.oneOf(['normal', 'small']),
+
+    /** Callback called when Picker options menu is closed */
+    onClose: PropTypes.func.isRequired,
+
+    /** Callback called when Picker options menu is open */
+    onOpen: PropTypes.func.isRequired,
+
+    /** Callback called when click or tap out of Picker */
+    onBlur: PropTypes.func,
 };
 const defaultProps = {
     disabled: false,
-    hasError: false,
+    errorText: '',
     focused: false,
     placeholder: {},
     value: null,
@@ -68,6 +77,7 @@ const defaultProps = {
         </>
     ),
     size: 'normal',
+    onBlur: undefined,
 };
 
 export {

src/components/Picker/BasePicker/index.js

@@ -15,13 +15,23 @@ class BasePicker extends React.Component {
         };
 
         this.updateSelectedValueAndExecuteOnChange = this.updateSelectedValueAndExecuteOnChange.bind(this);
+        this.executeOnCloseAndOnBlur = this.executeOnCloseAndOnBlur.bind(this);
     }
 
     updateSelectedValueAndExecuteOnChange(value) {
         this.props.onInputChange(value);
         this.setState({selectedValue: value});
     }
 
+    executeOnCloseAndOnBlur() {
+        // Picker's onClose is not executed on Web and Desktop, so props.onClose has to be called with onBlur callback.
+        this.props.onClose();
+
+        if (this.props.onBlur) {
+            this.props.onBlur();
+        }
+    }
+
     render() {
         const hasError = !_.isEmpty(this.props.errorText);
         return (
@@ -39,7 +49,7 @@ class BasePicker extends React.Component {
                 onClose={this.props.onClose}
                 pickerProps={{
                     onFocus: this.props.onOpen,
-                    onBlur: this.props.onBlur,
+                    onBlur: this.executeOnCloseAndOnBlur,
                     ref: this.props.innerRef,
                 }}
             />

src/languages/en.js

@@ -532,6 +532,7 @@ export default {
         buttonConfirm: 'Got it',
         error: {
             noBankAccountAvailable: 'Sorry, no bank account is available',
+            noBankAccountSelected: 'Please choose an account',
             taxID: 'Please enter a valid Tax ID Number',
             website: 'Please enter a valid website',
             zipCode: 'Please enter a valid zip code',

src/languages/es.js

@@ -532,6 +532,7 @@ export default {
         buttonConfirm: 'OK',
         error: {
             noBankAccountAvailable: 'Lo sentimos, no hay ninguna cuenta bancaria disponible',
+            noBankAccountSelected: 'Por favor, elige una cuenta bancaria',
             taxID: 'Ingresa un número de identificación fiscal válido',
             website: 'Ingresa un sitio web válido',
             zipCode: 'Ingresa un código postal válido',

src/pages/ReimbursementAccount/CompanyStep.js

@@ -270,7 +270,7 @@ class CompanyStep extends React.Component {
                             onInputChange={value => this.clearErrorAndSetValue('incorporationType', value)}
                             value={this.state.incorporationType}
                             placeholder={{value: '', label: '-'}}
-                            hasError={this.getErrors().incorporationType}
+                            errorText={this.getErrorText('incorporationType')}
                         />
                     </View>
                     <View style={styles.mt4}>

src/pages/workspace/WorkspaceNewRoomPage.js

@@ -171,7 +171,6 @@ class WorkspaceNewRoomPage extends React.Component {
                                 placeholder={{value: '', label: this.props.translate('newRoomPage.selectAWorkspace')}}
                                 items={this.state.workspaceOptions}
                                 errorText={this.state.errors.policyID}
-                                hasError={Boolean(this.state.errors.policyID)}
                                 onInputChange={policyID => this.clearErrorAndSetValue('policyID', policyID)}
                             />
                         </View>