Merge pull request Expensify#52659 from bernhardoj/fix/52382-caret-is…

…-shown-at-right-side-for-a-moment-2

Hide search input caret while search modal is animating

src/components/Search/SearchRouter/SearchRouter.tsx

@@ -2,6 +2,7 @@ import {useNavigationState} from '@react-navigation/native';
 import {Str} from 'expensify-common';
 import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {View} from 'react-native';
+import type {TextInputProps} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import type {ValueOf} from 'type-fest';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
@@ -46,9 +47,10 @@ import type {AutocompleteItemData} from './SearchRouterList';
 
 type SearchRouterProps = {
     onRouterClose: () => void;
+    shouldHideInputCaret?: TextInputProps['caretHidden'];
 };
 
-function SearchRouter({onRouterClose}: SearchRouterProps) {
+function SearchRouter({onRouterClose, shouldHideInputCaret}: SearchRouterProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const [betas] = useOnyx(ONYXKEYS.BETAS);
@@ -396,6 +398,7 @@ function SearchRouter({onRouterClose}: SearchRouterProps) {
                 onSubmit={() => {
                     onSearchSubmit(textInputValue);
                 }}
+                caretHidden={shouldHideInputCaret}
                 routerListRef={listRef}
                 shouldShowOfflineMessage
                 wrapperStyle={[styles.border, styles.alignItemsCenter]}

src/components/Search/SearchRouter/SearchRouterInput.tsx

@@ -1,6 +1,6 @@
 import type {ReactNode, RefObject} from 'react';
 import React, {useState} from 'react';
-import type {StyleProp, ViewStyle} from 'react-native';
+import type {StyleProp, TextInputProps, ViewStyle} from 'react-native';
 import {View} from 'react-native';
 import FormHelpMessage from '@components/FormHelpMessage';
 import type {SelectionListHandle} from '@components/SelectionList/types';
@@ -34,9 +34,6 @@ type SearchRouterInputProps = {
     /** Whether the offline message should be shown */
     shouldShowOfflineMessage?: boolean;
 
-    /** Whether the input should be focused */
-    autoFocus?: boolean;
-
     /** Any additional styles to apply */
     wrapperStyle?: StyleProp<ViewStyle>;
 
@@ -51,7 +48,7 @@ type SearchRouterInputProps = {
 
     /** Whether the search reports API call is running  */
     isSearchingForReports?: boolean;
-};
+} & Pick<TextInputProps, 'caretHidden' | 'autoFocus'>;
 
 function SearchRouterInput({
     value,
@@ -62,6 +59,7 @@ function SearchRouterInput({
     disabled = false,
     shouldShowOfflineMessage = false,
     autoFocus = true,
+    caretHidden = false,
     wrapperStyle,
     wrapperFocusedStyle,
     outerWrapperStyle,
@@ -86,6 +84,7 @@ function SearchRouterInput({
                         onChangeText={updateSearch}
                         autoFocus={autoFocus}
                         shouldDelayFocus={shouldDelayFocus}
+                        caretHidden={caretHidden}
                         loadingSpinnerStyle={[styles.mt0, styles.mr2]}
                         role={CONST.ROLE.PRESENTATION}
                         placeholder={translate('search.searchPlaceholder')}

src/components/Search/SearchRouter/SearchRouterModal.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useState} from 'react';
 import FocusTrapForModal from '@components/FocusTrap/FocusTrapForModal';
 import Modal from '@components/Modal';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
@@ -7,10 +7,15 @@ import CONST from '@src/CONST';
 import SearchRouter from './SearchRouter';
 import {useSearchRouterContext} from './SearchRouterContext';
 
+const isMobileSafari = Browser.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 modalType = shouldUseNarrowLayout ? CONST.MODAL.MODAL_TYPE.CENTERED_SWIPABLE_TO_RIGHT : CONST.MODAL.MODAL_TYPE.POPOVER;
 
     return (
@@ -22,10 +27,15 @@ function SearchRouterModal() {
             propagateSwipe
             shouldHandleNavigationBack={Browser.isMobileChrome()}
             onClose={closeSearchRouter}
+            onModalHide={() => setShouldHideInputCaret(isMobileSafari)}
+            onModalShow={() => setShouldHideInputCaret(false)}
         >
             {isSearchRouterDisplayed && (
                 <FocusTrapForModal active={isSearchRouterDisplayed}>
-                    <SearchRouter onRouterClose={closeSearchRouter} />
+                    <SearchRouter
+                        onRouterClose={closeSearchRouter}
+                        shouldHideInputCaret={shouldHideInputCaret}
+                    />
                 </FocusTrapForModal>
             )}
         </Modal>