fix: unable to open phone input country picker on mobile

src/components/PhoneInput/index.js

@@ -29,6 +29,7 @@ import {
 import { useCountry, useCountries } from './hooks';
 import CountriesDropdown from './countriesDropdown';
 import positionResolver from './helpers/positionResolver';
+import useIsMobile from '../../libs/hooks/useIsMobile';
 
 /**
  * phone input are used for freeform data entry.
@@ -89,6 +90,7 @@ const PhoneInput = React.forwardRef((props, ref) => {
     const [isOpen, setIsOpen] = useState(false);
     const [hasFocus, setHasFocus] = useState(false);
 
+    const isMobile = useIsMobile();
     useOutsideClick(
         pickerRef,
         event => {
@@ -108,7 +110,7 @@ const PhoneInput = React.forwardRef((props, ref) => {
         triggerElementRef: () => triggerRef,
         threshold: 10,
     });
-    useWindowResize(() => setIsOpen(false), isOpen);
+    useWindowResize(() => setIsOpen(false), isOpen && !isMobile);
 
     useEffect(() => {
         if (isOpen) searchRef.current.focus();

src/libs/hooks/useIsMobile.d.ts

@@ -0,0 +1,2 @@
+declare function useIsMobile(): boolean;
+export default useIsMobile;

src/libs/hooks/useIsMobile.js

@@ -0,0 +1,8 @@
+import { useMemo } from 'react';
+import isMobileFn from '../utils/isMobile';
+
+export default function useIsMobile() {
+    const isMobile = useMemo(() => isMobileFn(), []);
+
+    return isMobile;
+}

src/libs/utils/__test__/isMobile.spec.js

@@ -0,0 +1,38 @@
+import isMobile from '../isMobile';
+
+describe('isMobile', () => {
+    it('should return true if mobile', () => {
+        const useAgents = [
+            'Mozilla/5.0 (iPhone; CPU iPhone OS 16_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.5 Mobile/15E148 Safari/604.1',
+            'Mozilla/5.0 (iPhone; CPU iPhone OS 16_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/114.0.5735.99 Mobile/15E148 Safari/604.1',
+            'Mozilla/5.0 (iPhone; CPU iPhone OS 16_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) FxiOS/114.1 Mobile/15E148 Safari/605.1.15',
+            'Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Mobile Safari/537.36',
+            'Mozilla/5.0 (Linux; Android 13; SAMSUNG SM-S918B) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/21.0 Chrome/110.0.5481.154 Mobile Safari/537.36',
+            'Mozilla/5.0 (Linux; Android 13; SM-S918B) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.0.0 Mobile Safari/537.36 EdgA/113.0.1774.63',
+            'Mozilla/5.0 (Linux; Android 10; JNY-LX1; HMSCore 6.11.0.302) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.88 HuaweiBrowser/13.0.5.303 Mobile Safari/537.36',
+        ];
+        useAgents.forEach(agent => {
+            Object.defineProperty(window.navigator, 'userAgent', {
+                value: agent,
+                configurable: true,
+            });
+            expect(isMobile()).toBe(true);
+        });
+    });
+
+    it('should return true if not bmobile', () => {
+        const useAgents = [
+            'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.135 Safari/537.36 Edge/12.246',
+            'Mozilla/5.0 (X11; CrOS x86_64 8172.45.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.64 Safari/537.36',
+            'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_2) AppleWebKit/601.3.9 (KHTML, like Gecko) Version/9.0.2 Safari/601.3.9',
+            'Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:15.0) Gecko/20100101 Firefox/15.0.1',
+        ];
+        useAgents.forEach(agent => {
+            Object.defineProperty(window.navigator, 'userAgent', {
+                value: agent,
+                configurable: true,
+            });
+            expect(isMobile()).toBe(false);
+        });
+    });
+});

src/libs/utils/isMobile.d.ts

@@ -0,0 +1,2 @@
+declare function isMobile(): boolean;
+export default isMobile;