fix Locale Picker and small picker styles

src/components/ExpensiPicker.js

@@ -1,4 +1,4 @@
-import React, {PureComponent} from 'react';
+import React, {Component} from 'react';
 import {Text, View} from 'react-native';
 import PropTypes from 'prop-types';
 import Picker from './Picker';
@@ -17,7 +17,7 @@ const defaultProps = {
     isDisabled: false,
 };
 
-class ExpensiPicker extends PureComponent {
+class ExpensiPicker extends Component {
     constructor() {
         super();
         this.state = {

src/components/Picker/index.js

@@ -28,6 +28,10 @@ const Picker = ({
         fixAndroidTouchableBug
         onOpen={onOpen}
         onClose={onClose}
+        pickerProps={{
+            onFocus: onOpen,
+            onBlur: onClose,
+        }}
     />
 );
 

src/components/Picker/pickerStyles/index.js

@@ -1,5 +1,22 @@
+import CONST from '../../../CONST';
+import getBrowser from '../../../libs/getBrowser';
 import styles from '../../../styles/styles';
 
-const pickerStyles = disabled => styles.expensiPicker(disabled);
+const pickerStylesWeb = () => {
+    if ([CONST.BROWSER.FIREFOX].includes(getBrowser())) {
+        return {
+            textIndent: -2,
+        };
+    }
+    return {};
+};
+
+const pickerStyles = disabled => ({
+    ...styles.expensiPicker(disabled),
+    inputWeb: {
+        ...styles.expensiPicker(disabled).inputWeb,
+        ...pickerStylesWeb(),
+    },
+});
 
 export default pickerStyles;

src/libs/actions/App.js

@@ -36,7 +36,9 @@ function setCurrentURL(url) {
 * @param {String} locale
 */
 function setLocale(locale) {
-    API.PreferredLocale_Update({name: 'preferredLocale', value: locale});
+    if (currentUserAccountID) {
+        API.PreferredLocale_Update({name: 'preferredLocale', value: locale});
+    }
     Onyx.merge(ONYXKEYS.NVP_PREFERRED_LOCALE, locale);
 }
 

src/libs/getBrowser/index.js

@@ -0,0 +1 @@
+export default () => '';

src/libs/getBrowser/index.web.js

@@ -0,0 +1,51 @@
+import CONST from '../../CONST';
+
+/**
+ * fetch Browser Name and version from UA string
+ *
+ * @return {String} e.g. Chrome 80
+ */
+function getBrowserVersion() {
+    const {userAgent} = window.navigator;
+    let match = userAgent.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
+    let temp;
+
+    if (/trident/i.test(match[1])) {
+        temp = /\brv[ :]+(\d+)/g.exec(userAgent) || [];
+
+        return `IE ${temp[1] || ''}`;
+    }
+
+    if (match[1] === 'Chrome') {
+        temp = userAgent.match(/\b(OPR|Edge)\/(\d+)/);
+
+        if (temp !== null) {
+            return temp.slice(1).join(' ').replace('OPR', 'Opera');
+        }
+
+        temp = userAgent.match(/\b(Edg)\/(\d+)/);
+
+        if (temp !== null) {
+            return temp.slice(1).join(' ').replace('Edg', 'Edge');
+        }
+    }
+
+    match = match[2] ? [match[1], match[2]] : [navigator.appName, navigator.appVersion, '-?'];
+    temp = userAgent.match(/version\/(\d+)/i);
+
+    if (temp !== null) {
+        match.splice(1, 1, temp[1]);
+    }
+
+    return match.join(' ');
+}
+
+/**
+ * Get the Browser name
+ * @returns {String}
+ */
+export default () => {
+    const browserAndVersion = getBrowserVersion();
+    const [browser] = browserAndVersion.split(' ');
+    return browser ? browser.toLowerCase() : CONST.BROWSER.OTHER;
+};

src/styles/styles.js

@@ -370,6 +370,7 @@ const styles = {
             borderRadius: variables.componentBorderRadius,
             borderWidth: 1,
             borderColor: themeColors.border,
+            borderStyle: 'solid',
             color: themeColors.text,
             height: variables.componentSizeSmall,
             opacity: 1,
@@ -385,6 +386,7 @@ const styles = {
             borderWidth: 1,
             borderRadius: variables.componentBorderRadius,
             borderColor: themeColors.border,
+            borderStyle: 'solid',
             color: themeColors.text,
             appearance: 'none',
             height: variables.componentSizeSmall,
@@ -402,6 +404,7 @@ const styles = {
             borderWidth: 1,
             borderRadius: variables.componentBorderRadius,
             borderColor: themeColors.border,
+            borderStyle: 'solid',
             color: themeColors.text,
             height: variables.componentSizeSmall,
             opacity: 1,