diff --git a/src/components/Search/SearchRouter/SearchRouterModal.tsx b/src/components/Search/SearchRouter/SearchRouterModal.tsx index 5fd452afd685..482fac5acb3a 100644 --- a/src/components/Search/SearchRouter/SearchRouterModal.tsx +++ b/src/components/Search/SearchRouter/SearchRouterModal.tsx @@ -6,12 +6,12 @@ import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useThemeStyles from '@hooks/useThemeStyles'; import useViewportOffsetTop from '@hooks/useViewportOffsetTop'; import useWindowDimensions from '@hooks/useWindowDimensions'; -import {isMobileChrome, isMobileSafari} from '@libs/Browser'; +import {isMobileChrome, isMobileIOS} from '@libs/Browser'; import CONST from '@src/CONST'; import SearchRouter from './SearchRouter'; import {useSearchRouterContext} from './SearchRouterContext'; -const isMobileWebSafari = isMobileSafari(); +const isMobileWebIOS = isMobileIOS(); function SearchRouterModal() { const styles = useThemeStyles(); @@ -21,7 +21,7 @@ function SearchRouterModal() { const viewportOffsetTop = useViewportOffsetTop(); // On mWeb Safari, the input caret stuck for a moment while the modal is animating. So, we hide the caret until the animation is done. - const [shouldHideInputCaret, setShouldHideInputCaret] = useState(isMobileWebSafari); + const [shouldHideInputCaret, setShouldHideInputCaret] = useState(isMobileWebIOS); const modalType = shouldUseNarrowLayout ? CONST.MODAL.MODAL_TYPE.CENTERED_SWIPABLE_TO_RIGHT : CONST.MODAL.MODAL_TYPE.POPOVER; @@ -36,7 +36,7 @@ function SearchRouterModal() { swipeDirection={shouldUseNarrowLayout ? CONST.SWIPE_DIRECTION.RIGHT : undefined} shouldHandleNavigationBack={isMobileChrome()} onClose={closeSearchRouter} - onModalHide={() => setShouldHideInputCaret(isMobileWebSafari)} + onModalHide={() => setShouldHideInputCaret(isMobileWebIOS)} onModalShow={() => setShouldHideInputCaret(false)} shouldApplySidePanelOffset={!shouldUseNarrowLayout} > diff --git a/src/libs/Browser/index.ts b/src/libs/Browser/index.ts index 74427ea41be0..7f17c102847f 100644 --- a/src/libs/Browser/index.ts +++ b/src/libs/Browser/index.ts @@ -1,9 +1,11 @@ -import type {GetBrowser, IsChromeIOS, IsMobile, IsMobileChrome, IsMobileSafari, IsMobileWebKit, IsModernSafari, IsSafari, OpenRouteInDesktopApp} from './types'; +import type {GetBrowser, IsChromeIOS, IsMobile, IsMobileChrome, IsMobileIOS, IsMobileSafari, IsMobileWebKit, IsModernSafari, IsSafari, OpenRouteInDesktopApp} from './types'; const getBrowser: GetBrowser = () => ''; const isMobile: IsMobile = () => false; +const isMobileIOS: IsMobileIOS = () => false; + const isMobileSafari: IsMobileSafari = () => false; const isMobileChrome: IsMobileChrome = () => false; @@ -18,4 +20,4 @@ const isModernSafari: IsModernSafari = () => false; const openRouteInDesktopApp: OpenRouteInDesktopApp = () => {}; -export {getBrowser, isMobile, isMobileSafari, isMobileWebKit, isSafari, isModernSafari, isMobileChrome, isChromeIOS, openRouteInDesktopApp}; +export {getBrowser, isMobile, isMobileIOS, isMobileSafari, isMobileWebKit, isSafari, isModernSafari, isMobileChrome, isChromeIOS, openRouteInDesktopApp}; diff --git a/src/libs/Browser/index.website.ts b/src/libs/Browser/index.website.ts index 5c2cf2e9a7c7..c817d96ac40f 100644 --- a/src/libs/Browser/index.website.ts +++ b/src/libs/Browser/index.website.ts @@ -1,7 +1,7 @@ import CONFIG from '@src/CONFIG'; import CONST from '@src/CONST'; import ROUTES from '@src/ROUTES'; -import type {GetBrowser, IsChromeIOS, IsMobile, IsMobileChrome, IsMobileSafari, IsMobileWebKit, IsModernSafari, IsSafari, OpenRouteInDesktopApp} from './types'; +import type {GetBrowser, IsChromeIOS, IsMobile, IsMobileChrome, IsMobileIOS, IsMobileSafari, IsMobileWebKit, IsModernSafari, IsSafari, OpenRouteInDesktopApp} from './types'; let isOpenRouteInDesktop = false; /** @@ -41,6 +41,11 @@ const getBrowser: GetBrowser = () => { */ const isMobile: IsMobile = () => /Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Silk|Opera Mini/i.test(navigator.userAgent); +const isMobileIOS: IsMobileIOS = () => { + const userAgent = navigator.userAgent; + return /iP(ad|od|hone)/i.test(userAgent); +}; + /** * Checks if requesting user agent is Safari browser on a mobile device * @@ -140,6 +145,7 @@ const resetIsOpeningRouteInDesktop = () => { export { getBrowser, isMobile, + isMobileIOS, isMobileSafari, isMobileWebKit, isSafari, diff --git a/src/libs/Browser/types.ts b/src/libs/Browser/types.ts index 01c0decbf330..1e116a1282ae 100644 --- a/src/libs/Browser/types.ts +++ b/src/libs/Browser/types.ts @@ -2,6 +2,8 @@ type GetBrowser = () => string; type IsMobile = () => boolean; +type IsMobileIOS = () => boolean; + type IsMobileSafari = () => boolean; type IsMobileChrome = () => boolean; @@ -16,4 +18,4 @@ type IsModernSafari = () => boolean; type OpenRouteInDesktopApp = (shortLivedAuthToken?: string, email?: string, initialRoute?: string) => void; -export type {GetBrowser, IsMobile, IsMobileSafari, IsMobileChrome, IsMobileWebKit, IsSafari, IsModernSafari, IsChromeIOS, OpenRouteInDesktopApp}; +export type {GetBrowser, IsMobile, IsMobileIOS, IsMobileSafari, IsMobileChrome, IsMobileWebKit, IsSafari, IsModernSafari, IsChromeIOS, OpenRouteInDesktopApp};