From 83849a4ad36a19111dfd510496f6828cab8236d0 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Fri, 24 Jan 2025 14:57:48 +0800 Subject: [PATCH 1/4] fix the viewport is scrolled to bottom when the modal shows while a keyboard is visible --- .../Search/SearchRouter/SearchRouterModal.tsx | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/src/components/Search/SearchRouter/SearchRouterModal.tsx b/src/components/Search/SearchRouter/SearchRouterModal.tsx index 340b46cbf1731..24147e47cf3a3 100644 --- a/src/components/Search/SearchRouter/SearchRouterModal.tsx +++ b/src/components/Search/SearchRouter/SearchRouterModal.tsx @@ -2,19 +2,19 @@ import React, {useState} from 'react'; import FocusTrapForModal from '@components/FocusTrap/FocusTrapForModal'; import Modal from '@components/Modal'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; -import * as Browser from '@libs/Browser'; +import {isMobile, isMobileChrome, isMobileSafari} from '@libs/Browser'; import CONST from '@src/CONST'; import SearchRouter from './SearchRouter'; import {useSearchRouterContext} from './SearchRouterContext'; -const isMobileSafari = Browser.isMobileSafari(); +const isMobileWebSafari = isMobileSafari(); function SearchRouterModal() { const {shouldUseNarrowLayout} = useResponsiveLayout(); const {isSearchRouterDisplayed, closeSearchRouter} = useSearchRouterContext(); // 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(isMobileSafari); + const [shouldHideInputCaret, setShouldHideInputCaret] = useState(isMobileWebSafari); const modalType = shouldUseNarrowLayout ? CONST.MODAL.MODAL_TYPE.CENTERED_SWIPABLE_TO_RIGHT : CONST.MODAL.MODAL_TYPE.POPOVER; @@ -25,10 +25,15 @@ function SearchRouterModal() { popoverAnchorPosition={{right: 6, top: 6}} fullscreen propagateSwipe - shouldHandleNavigationBack={Browser.isMobileChrome()} + shouldHandleNavigationBack={isMobileChrome()} onClose={closeSearchRouter} - onModalHide={() => setShouldHideInputCaret(isMobileSafari)} - onModalShow={() => setShouldHideInputCaret(false)} + onModalHide={() => setShouldHideInputCaret(isMobileWebSafari)} + onModalShow={() => { + if (isMobile()) { + window.scroll({top: 0}); + } + setShouldHideInputCaret(false); + }} > {isSearchRouterDisplayed && ( From 0d3bcf7f8095275d16dd721cb2bc10154ffea74a Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Tue, 11 Feb 2025 17:39:43 +0800 Subject: [PATCH 2/4] apply padding based on offset top --- .../Search/SearchRouter/SearchRouterModal.tsx | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/src/components/Search/SearchRouter/SearchRouterModal.tsx b/src/components/Search/SearchRouter/SearchRouterModal.tsx index 24147e47cf3a3..65062d31f8274 100644 --- a/src/components/Search/SearchRouter/SearchRouterModal.tsx +++ b/src/components/Search/SearchRouter/SearchRouterModal.tsx @@ -2,7 +2,8 @@ import React, {useState} from 'react'; import FocusTrapForModal from '@components/FocusTrap/FocusTrapForModal'; import Modal from '@components/Modal'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; -import {isMobile, isMobileChrome, isMobileSafari} from '@libs/Browser'; +import useViewportOffsetTop from '@hooks/useViewportOffsetTop'; +import {isMobileChrome, isMobileSafari} from '@libs/Browser'; import CONST from '@src/CONST'; import SearchRouter from './SearchRouter'; import {useSearchRouterContext} from './SearchRouterContext'; @@ -12,6 +13,7 @@ const isMobileWebSafari = isMobileSafari(); function SearchRouterModal() { const {shouldUseNarrowLayout} = useResponsiveLayout(); const {isSearchRouterDisplayed, closeSearchRouter} = useSearchRouterContext(); + 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); @@ -22,18 +24,14 @@ function SearchRouterModal() { setShouldHideInputCaret(isMobileWebSafari)} - onModalShow={() => { - if (isMobile()) { - window.scroll({top: 0}); - } - setShouldHideInputCaret(false); - }} + onModalShow={() => setShouldHideInputCaret(false)} > {isSearchRouterDisplayed && ( From 1b0dead83dfbda8afd8fdd2d2ed0da2947eb99e2 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Thu, 13 Feb 2025 15:45:15 +0800 Subject: [PATCH 3/4] fix missing top inset --- src/components/Search/SearchRouter/SearchRouterModal.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/Search/SearchRouter/SearchRouterModal.tsx b/src/components/Search/SearchRouter/SearchRouterModal.tsx index 65062d31f8274..fa8165fec596d 100644 --- a/src/components/Search/SearchRouter/SearchRouterModal.tsx +++ b/src/components/Search/SearchRouter/SearchRouterModal.tsx @@ -2,6 +2,7 @@ import React, {useState} from 'react'; import FocusTrapForModal from '@components/FocusTrap/FocusTrapForModal'; import Modal from '@components/Modal'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; +import useSafeAreaInsets from '@hooks/useSafeAreaInsets'; import useViewportOffsetTop from '@hooks/useViewportOffsetTop'; import {isMobileChrome, isMobileSafari} from '@libs/Browser'; import CONST from '@src/CONST'; @@ -14,6 +15,7 @@ function SearchRouterModal() { const {shouldUseNarrowLayout} = useResponsiveLayout(); const {isSearchRouterDisplayed, closeSearchRouter} = useSearchRouterContext(); const viewportOffsetTop = useViewportOffsetTop(); + const safeAreaInsets = useSafeAreaInsets(); // 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); @@ -24,7 +26,7 @@ function SearchRouterModal() { Date: Fri, 21 Feb 2025 00:03:42 +0800 Subject: [PATCH 4/4] bump live-markdown --- package-lock.json | 8 ++++---- package.json | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index b0d2af7099541..ec8dd1dc934cf 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,7 +12,7 @@ "dependencies": { "@dotlottie/react-player": "^1.6.3", "@expensify/react-native-background-task": "file:./modules/background-task", - "@expensify/react-native-live-markdown": "0.1.230", + "@expensify/react-native-live-markdown": "0.1.234", "@expo/metro-runtime": "^4.0.0", "@firebase/app": "^0.10.10", "@firebase/performance": "^0.6.8", @@ -3642,9 +3642,9 @@ "link": true }, "node_modules/@expensify/react-native-live-markdown": { - "version": "0.1.230", - "resolved": "https://registry.npmjs.org/@expensify/react-native-live-markdown/-/react-native-live-markdown-0.1.230.tgz", - "integrity": "sha512-1b+sVJRvHPpnSFhGtS4IHD03vzMEz79NUyokVd+coWNnLOgb4/3ZlC9U58Dymc9+/eqq191lhALSDJMTm2DWow==", + "version": "0.1.234", + "resolved": "https://registry.npmjs.org/@expensify/react-native-live-markdown/-/react-native-live-markdown-0.1.234.tgz", + "integrity": "sha512-PoNYVX+CbZdjIQ4JqlY6aTk5KAeIxeyQ9THhdfCJKFzRnSJDWYKvnNlL4DgOHsSfGjV+DszWJK/cyrxuK5tPBQ==", "license": "MIT", "workspaces": [ "./example", diff --git a/package.json b/package.json index 12b027c1b9a94..30d6932c9bdcc 100644 --- a/package.json +++ b/package.json @@ -79,7 +79,7 @@ "dependencies": { "@dotlottie/react-player": "^1.6.3", "@expensify/react-native-background-task": "file:./modules/background-task", - "@expensify/react-native-live-markdown": "0.1.230", + "@expensify/react-native-live-markdown": "0.1.234", "@expo/metro-runtime": "^4.0.0", "@firebase/app": "^0.10.10", "@firebase/performance": "^0.6.8",