[Gekidou MM-48006] Show keyboard when select a modifier (#6714)

app/components/navigation_header/index.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React from 'react';
+import React, {forwardRef} from 'react';
 import Animated, {useAnimatedStyle, useDerivedValue} from 'react-native-reanimated';
 
 import {SEARCH_INPUT_HEIGHT, SEARCH_INPUT_MARGIN} from '@constants/view';
@@ -14,7 +14,7 @@ import Header, {HeaderRightButton} from './header';
 import NavigationHeaderLargeTitle from './large';
 import NavigationSearch from './search';
 
-import type {SearchProps} from '@components/search';
+import type {SearchProps, SearchRef} from '@components/search';
 
 type Props = SearchProps & {
     hasSearch?: boolean;
@@ -41,7 +41,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
     },
 }));
 
-const NavigationHeader = ({
+const NavigationHeader = forwardRef<SearchRef, Props>(({
     hasSearch = false,
     isLargeTitle = false,
     leftComponent,
@@ -56,7 +56,7 @@ const NavigationHeader = ({
     title = '',
     hideHeader,
     ...searchProps
-}: Props) => {
+}: Props, ref) => {
     const theme = useTheme();
     const styles = getStyleSheet(theme);
 
@@ -125,12 +125,14 @@ const NavigationHeader = ({
                     hideHeader={hideHeader}
                     theme={theme}
                     topStyle={searchTopStyle}
+                    ref={ref}
                 />
                 }
             </Animated.View>
         </>
     );
-};
+});
 
+NavigationHeader.displayName = 'NavHeader';
 export default NavigationHeader;
 

app/components/navigation_header/search.tsx

@@ -1,11 +1,11 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React, {useCallback, useEffect, useMemo} from 'react';
+import React, {forwardRef, useCallback, useEffect, useMemo} from 'react';
 import {DeviceEventEmitter, Keyboard, NativeSyntheticEvent, Platform, TextInputFocusEventData, ViewStyle} from 'react-native';
 import Animated, {AnimatedStyleProp} from 'react-native-reanimated';
 
-import Search, {SearchProps} from '@components/search';
+import Search, {SearchProps, SearchRef} from '@components/search';
 import {Events} from '@constants';
 import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
 import {typography} from '@utils/typography';
@@ -31,12 +31,12 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
     },
 }));
 
-const NavigationSearch = ({
+const NavigationSearch = forwardRef<SearchRef, Props>(({
     hideHeader,
     theme,
     topStyle,
     ...searchProps
-}: Props) => {
+}: Props, ref) => {
     const styles = getStyleSheet(theme);
 
     const cancelButtonProps: SearchProps['cancelButtonProps'] = useMemo(() => ({
@@ -52,24 +52,27 @@ const NavigationSearch = ({
         searchProps.onFocus?.(e);
     }, [hideHeader, searchProps.onFocus]);
 
-    useEffect(() => {
-        const show = Keyboard.addListener('keyboardDidShow', () => {
-            if (Platform.OS === 'android') {
-                DeviceEventEmitter.emit(Events.TAB_BAR_VISIBLE, false);
-            }
-        });
+    const showEmitter = useCallback(() => {
+        if (Platform.OS === 'android') {
+            DeviceEventEmitter.emit(Events.TAB_BAR_VISIBLE, false);
+        }
+    }, []);
 
-        const hide = Keyboard.addListener('keyboardDidHide', () => {
-            if (Platform.OS === 'android') {
-                DeviceEventEmitter.emit(Events.TAB_BAR_VISIBLE, true);
-            }
-        });
+    const hideEmitter = useCallback(() => {
+        if (Platform.OS === 'android') {
+            DeviceEventEmitter.emit(Events.TAB_BAR_VISIBLE, true);
+        }
+    }, []);
+
+    useEffect(() => {
+        const show = Keyboard.addListener('keyboardDidShow', showEmitter);
+        const hide = Keyboard.addListener('keyboardDidHide', hideEmitter);
 
         return () => {
             hide.remove();
             show.remove();
         };
-    }, []);
+    }, [hideEmitter, showEmitter]);
 
     return (
         <Animated.View style={[styles.container, topStyle]}>
@@ -83,10 +86,12 @@ const NavigationSearch = ({
                 placeholderTextColor={changeOpacity(theme.sidebarText, Platform.select({android: 0.56, default: 0.72}))}
                 searchIconColor={theme.sidebarText}
                 selectionColor={theme.sidebarText}
+                ref={ref}
             />
         </Animated.View>
     );
-};
+});
 
+NavigationSearch.displayName = 'NavSearch';
 export default NavigationSearch;
 

app/components/search/index.tsx

@@ -42,7 +42,7 @@ export type SearchProps = TextInputProps & {
     showLoading?: boolean;
 };
 
-type SearchRef = {
+export type SearchRef = {
     blur: () => void;
     cancel: () => void;
     clear: () => void;
@@ -151,7 +151,6 @@ const Search = forwardRef<SearchRef, SearchProps>((props: SearchProps, ref) => {
         focus: () => {
             searchRef.current?.focus();
         },
-
     }), [searchRef]);
 
     return (

app/screens/home/index.tsx

@@ -20,10 +20,9 @@ import Account from './account';
 import ChannelList from './channel_list';
 import RecentMentions from './recent_mentions';
 import SavedMessages from './saved_messages';
+import Search from './search';
 import TabBar from './tab_bar';
 
-// import Search from './search';
-
 import type {LaunchProps} from '@typings/launch';
 
 if (Platform.OS === 'ios') {
@@ -125,11 +124,11 @@ export default function HomeScreen(props: HomeProps) {
                 >
                     {() => <ChannelList {...props}/>}
                 </Tab.Screen>
-                {/* <Tab.Screen
+                <Tab.Screen
                     name={Screens.SEARCH}
                     component={Search}
                     options={{unmountOnBlur: false, lazy: true, tabBarTestID: 'tab_bar.search.tab', freezeOnBlur: true}}
-                /> */}
+                />
                 <Tab.Screen
                     name={Screens.MENTIONS}
                     component={RecentMentions}

app/screens/home/search/search.tsx

@@ -17,6 +17,7 @@ import FreezeScreen from '@components/freeze_screen';
 import Loading from '@components/loading';
 import NavigationHeader from '@components/navigation_header';
 import RoundedHeaderContext from '@components/rounded_header_context';
+import {SearchRef} from '@components/search';
 import {BOTTOM_TAB_HEIGHT} from '@constants/view';
 import {useServerUrl} from '@context/server';
 import {useTheme} from '@context/theme';
@@ -84,6 +85,8 @@ const SearchScreen = ({teamId}: Props) => {
 
     const clearRef = useRef<boolean>(false);
     const cancelRef = useRef<boolean>(false);
+    const searchRef = useRef<SearchRef>(null);
+
     const [cursorPosition, setCursorPosition] = useState(searchTerm?.length || 0);
     const [searchValue, setSearchValue] = useState<string>(searchTerm || '');
     const [searchTeamId, setSearchTeamId] = useState<string>(teamId);
@@ -144,6 +147,11 @@ const SearchScreen = ({teamId}: Props) => {
         setCursorPosition(newValue.length);
     }, []);
 
+    const handleModifierTextChange = useCallback((newValue: string) => {
+        searchRef.current?.focus?.();
+        handleTextChange(newValue);
+    }, [handleTextChange]);
+
     const handleLoading = useCallback((show: boolean) => {
         (showResults ? setResultsLoading : setLoading)(show);
     }, [showResults]);
@@ -218,7 +226,7 @@ const SearchScreen = ({teamId}: Props) => {
                 scrollEnabled={scrollEnabled}
                 searchValue={searchValue}
                 setRecentValue={handleRecentSearch}
-                setSearchValue={handleTextChange}
+                setSearchValue={handleModifierTextChange}
                 setTeamId={setSearchTeamId}
                 teamId={searchTeamId}
             />
@@ -318,6 +326,7 @@ const SearchScreen = ({teamId}: Props) => {
                 onClear={handleClearSearch}
                 onCancel={handleCancelSearch}
                 defaultValue={searchValue}
+                ref={searchRef}
             />
             <SafeAreaView
                 style={styles.flex}