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;