From 276731b9424caf75890f0ae3b42e5b2a7fdf4095 Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Wed, 26 Feb 2025 16:56:44 +0800
Subject: [PATCH 1/3] enable keyboard avoiding view in search modal

---
 .../Search/SearchRouter/SearchRouterModal.tsx | 24 ++++++++++++-------
 1 file changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/components/Search/SearchRouter/SearchRouterModal.tsx b/src/components/Search/SearchRouter/SearchRouterModal.tsx
index 340b46cbf173..10c4ac7868d7 100644
--- a/src/components/Search/SearchRouter/SearchRouterModal.tsx
+++ b/src/components/Search/SearchRouter/SearchRouterModal.tsx
@@ -1,7 +1,9 @@
 import React, {useState} from 'react';
 import FocusTrapForModal from '@components/FocusTrap/FocusTrapForModal';
+import KeyboardAvoidingView from '@components/KeyboardAvoidingView';
 import Modal from '@components/Modal';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as Browser from '@libs/Browser';
 import CONST from '@src/CONST';
 import SearchRouter from './SearchRouter';
@@ -10,6 +12,7 @@ import {useSearchRouterContext} from './SearchRouterContext';
 const isMobileSafari = Browser.isMobileSafari();
 
 function SearchRouterModal() {
+    const styles = useThemeStyles();
     const {shouldUseNarrowLayout} = useResponsiveLayout();
     const {isSearchRouterDisplayed, closeSearchRouter} = useSearchRouterContext();
 
@@ -30,14 +33,19 @@ function SearchRouterModal() {
             onModalHide={() => setShouldHideInputCaret(isMobileSafari)}
             onModalShow={() => setShouldHideInputCaret(false)}
         >
-            {isSearchRouterDisplayed && (
-                <FocusTrapForModal active={isSearchRouterDisplayed}>
-                    <SearchRouter
-                        onRouterClose={closeSearchRouter}
-                        shouldHideInputCaret={shouldHideInputCaret}
-                    />
-                </FocusTrapForModal>
-            )}
+            <KeyboardAvoidingView
+                behavior="padding"
+                style={styles.flex1}
+            >
+                {isSearchRouterDisplayed && (
+                    <FocusTrapForModal active={isSearchRouterDisplayed}>
+                        <SearchRouter
+                            onRouterClose={closeSearchRouter}
+                            shouldHideInputCaret={shouldHideInputCaret}
+                        />
+                    </FocusTrapForModal>
+                )}
+            </KeyboardAvoidingView>
         </Modal>
     );
 }

From 52096f5829a8796f2812e0834e117fa138bdb8bf Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Fri, 28 Feb 2025 12:50:08 +0800
Subject: [PATCH 2/3] keyboard avoiding view in mweb safari

---
 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 e47fc7ba0143..3b03ac86662d 100644
--- a/src/components/Search/SearchRouter/SearchRouterModal.tsx
+++ b/src/components/Search/SearchRouter/SearchRouterModal.tsx
@@ -6,6 +6,7 @@ import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useSafeAreaInsets from '@hooks/useSafeAreaInsets';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useViewportOffsetTop from '@hooks/useViewportOffsetTop';
+import useWindowDimensions from '@hooks/useWindowDimensions';
 import {isMobileChrome, isMobileSafari} from '@libs/Browser';
 import CONST from '@src/CONST';
 import SearchRouter from './SearchRouter';
@@ -16,6 +17,7 @@ const isMobileWebSafari = isMobileSafari();
 function SearchRouterModal() {
     const styles = useThemeStyles();
     const {shouldUseNarrowLayout} = useResponsiveLayout();
+    const {windowHeight} = useWindowDimensions();
     const {isSearchRouterDisplayed, closeSearchRouter} = useSearchRouterContext();
     const viewportOffsetTop = useViewportOffsetTop();
     const safeAreaInsets = useSafeAreaInsets();
@@ -40,7 +42,7 @@ function SearchRouterModal() {
         >
             <KeyboardAvoidingView
                 behavior="padding"
-                style={styles.flex1}
+                style={[styles.flex1, {maxHeight: windowHeight}]}
             >
                 {isSearchRouterDisplayed && (
                     <FocusTrapForModal active={isSearchRouterDisplayed}>

From abf96defe37cdaa27709c765b87ca2b4f2953841 Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Fri, 28 Feb 2025 12:50:24 +0800
Subject: [PATCH 3/3] prevent viewport scrolling

---
 src/components/Search/SearchAutocompleteList.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Search/SearchAutocompleteList.tsx b/src/components/Search/SearchAutocompleteList.tsx
index 4448189c77c2..dc880c3f5dfb 100644
--- a/src/components/Search/SearchAutocompleteList.tsx
+++ b/src/components/Search/SearchAutocompleteList.tsx
@@ -487,7 +487,7 @@ function SearchAutocompleteList(
             onSelectRow={onListItemPress}
             ListItem={SearchRouterItem}
             containerStyle={[styles.mh100]}
-            sectionListStyle={[styles.ph2, styles.pb2]}
+            sectionListStyle={[styles.ph2, styles.pb2, styles.overscrollBehaviorContain]}
             listItemWrapperStyle={[styles.pr0, styles.pl0]}
             getItemHeight={getItemHeight}
             onLayout={() => {