Skip to content

Fix cursor moves out of place #60695

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dangrous merged 1 commit into from
Apr 24, 2025
Merged

Fix cursor moves out of place #60695

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions src/components/Search/SearchRouter/SearchRouterModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -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;

Expand All @@ -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}
>
Expand Down
6 changes: 4 additions & 2 deletions src/libs/Browser/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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};
8 changes: 7 additions & 1 deletion src/libs/Browser/index.website.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
/**
Expand Down Expand Up @@ -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
*
Expand Down Expand Up @@ -140,6 +145,7 @@ const resetIsOpeningRouteInDesktop = () => {
export {
getBrowser,
isMobile,
isMobileIOS,
isMobileSafari,
isMobileWebKit,
isSafari,
Expand Down
4 changes: 3 additions & 1 deletion src/libs/Browser/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@ type GetBrowser = () => string;

type IsMobile = () => boolean;

type IsMobileIOS = () => boolean;

type IsMobileSafari = () => boolean;

type IsMobileChrome = () => boolean;
Expand All @@ -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};