From 1fb5be3fdb0b6f3002762eebcde454cc212996f8 Mon Sep 17 00:00:00 2001
From: Rajat Parashar <parasharrajat@users.noreply.github.com>
Date: Thu, 26 Aug 2021 15:28:28 +0530
Subject: [PATCH] Fix the Picker styles for firefox

---
 src/CONST.js                                | 10 ++++
 src/components/Picker/pickerStyles/index.js | 19 +++++++-
 src/libs/getBrowser/index.js                |  1 +
 src/libs/getBrowser/index.web.js            | 51 +++++++++++++++++++++
 4 files changed, 80 insertions(+), 1 deletion(-)
 create mode 100644 src/libs/getBrowser/index.js
 create mode 100644 src/libs/getBrowser/index.web.js

diff --git a/src/CONST.js b/src/CONST.js
index f055faaa97e6..95b9d23abca5 100755
--- a/src/CONST.js
+++ b/src/CONST.js
@@ -329,6 +329,16 @@ const CONST = {
         NATIVE: 'Native',
     },
 
+    BROWSER: {
+        CHROME: 'chrome',
+        FIREFOX: 'firefox',
+        IE: 'ie',
+        EDGE: 'edge',
+        Opera: 'opera',
+        SAFARI: 'safari',
+        OTHER: 'other',
+    },
+
     IOU: {
         // Note: These payment types are used when building IOU reportAction message values in the server and should
         // not be changed.
diff --git a/src/components/Picker/pickerStyles/index.js b/src/components/Picker/pickerStyles/index.js
index 7c11a9f8ed86..ecd3e398bdb1 100644
--- a/src/components/Picker/pickerStyles/index.js
+++ b/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;
diff --git a/src/libs/getBrowser/index.js b/src/libs/getBrowser/index.js
new file mode 100644
index 000000000000..94bc2b70e392
--- /dev/null
+++ b/src/libs/getBrowser/index.js
@@ -0,0 +1 @@
+export default () => '';
diff --git a/src/libs/getBrowser/index.web.js b/src/libs/getBrowser/index.web.js
new file mode 100644
index 000000000000..3453629feb5c
--- /dev/null
+++ b/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;
+};