Fix hardware keys not working as expected (#8156) (#8160)

(cherry picked from commit 6ad21e1)

Co-authored-by: Daniel Espino García <[email protected]>

app/components/post_draft/post_input/post_input.tsx

@@ -220,7 +220,7 @@ export default function PostInput({
         addFiles(await extractFileInfo(files));
     }, [addFiles, intl]);
 
-    const handleHardwareEnterPress = () => {
+    const handleHardwareEnterPress = useCallback(() => {
         const topScreen = NavigationStore.getVisibleScreen();
         let sourceScreen: AvailableScreens = Screens.CHANNEL;
         if (rootId) {
@@ -231,9 +231,9 @@ export default function PostInput({
         if (topScreen === sourceScreen) {
             sendMessage();
         }
-    };
+    }, [sendMessage, rootId, isTablet]);
 
-    const handleHardwareShiftEnter = () => {
+    const handleHardwareShiftEnter = useCallback(() => {
         const topScreen = NavigationStore.getVisibleScreen();
         let sourceScreen: AvailableScreens = Screens.CHANNEL;
         if (rootId) {
@@ -251,7 +251,7 @@ export default function PostInput({
             updateCursorPosition((pos) => pos + 1);
             propagateValue(newValue!);
         }
-    };
+    }, [rootId, isTablet, updateValue, updateCursorPosition, cursorPosition, propagateValue]);
 
     const onAppStateChange = useCallback((appState: AppStateStatus) => {
         if (appState !== 'active' && previousAppState.current === 'active') {
@@ -307,10 +307,11 @@ export default function PostInput({
         }
     }, [value]);
 
-    useHardwareKeyboardEvents({
+    const events = useMemo(() => ({
         onEnterPressed: handleHardwareEnterPress,
         onShiftEnterPressed: handleHardwareShiftEnter,
-    });
+    }), [handleHardwareEnterPress, handleHardwareShiftEnter]);
+    useHardwareKeyboardEvents(events);
 
     return (
         <PasteableTextInput

app/screens/home/index.tsx

@@ -4,7 +4,7 @@
 import {useHardwareKeyboardEvents} from '@mattermost/hardware-keyboard';
 import {createBottomTabNavigator, type BottomTabBarProps} from '@react-navigation/bottom-tabs';
 import {NavigationContainer} from '@react-navigation/native';
-import React, {useEffect} from 'react';
+import React, {useCallback, useEffect, useMemo} from 'react';
 import {useIntl} from 'react-intl';
 import {DeviceEventEmitter, Platform} from 'react-native';
 import {enableFreeze, enableScreens} from 'react-native-screens';
@@ -62,16 +62,17 @@ export default function HomeScreen(props: HomeProps) {
     const intl = useIntl();
     const appState = useAppState();
 
-    const handleFindChannels = () => {
+    const handleFindChannels = useCallback(() => {
         if (!NavigationStore.getScreensInStack().includes(Screens.FIND_CHANNELS)) {
             findChannels(
                 intl.formatMessage({id: 'find_channels.title', defaultMessage: 'Find Channels'}),
                 theme,
             );
         }
-    };
+    }, [intl, theme]);
 
-    useHardwareKeyboardEvents({onFindChannels: handleFindChannels});
+    const events = useMemo(() => ({onFindChannels: handleFindChannels}), [handleFindChannels]);
+    useHardwareKeyboardEvents(events);
 
     useEffect(() => {
         const listener = DeviceEventEmitter.addListener(Events.NOTIFICATION_ERROR, (value: 'Team' | 'Channel' | 'Post' | 'Connection') => {

app/screens/home/search/search.tsx

@@ -324,15 +324,16 @@ const SearchScreen = ({teamId, teams}: Props) => {
         }
     }, [isFocused]);
 
-    const handleEnterPressed = () => {
+    const handleEnterPressed = useCallback(() => {
         const topScreen = NavigationStore.getVisibleScreen();
         if (topScreen === Screens.HOME && isFocused) {
             searchRef.current?.blur();
             onSubmit();
         }
-    };
+    }, [isFocused, onSubmit]);
 
-    useHardwareKeyboardEvents({onEnterPressed: handleEnterPressed});
+    const events = useMemo(() => ({onEnterPressed: handleEnterPressed}), [handleEnterPressed]);
+    useHardwareKeyboardEvents(events);
 
     return (
         <FreezeScreen freeze={!isFocused}>

libraries/@mattermost/hardware-keyboard/src/index.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import {useEffect} from 'react';
+import {useCallback, useEffect} from 'react';
 import {NativeEventEmitter, NativeModules, Platform} from 'react-native';
 
 const LINKING_ERROR =
@@ -37,7 +37,7 @@ type Events = {
 }
 
 export function useHardwareKeyboardEvents(events: Events) {
-    const handleEvent = (e: Event) => {
+    const handleEvent = useCallback((e: Event) => {
         switch (e.action) {
             case 'enter':
                 events.onEnterPressed?.();
@@ -49,11 +49,11 @@ export function useHardwareKeyboardEvents(events: Events) {
                 events.onFindChannels?.();
                 break;
         }
-    };
+    }, [events]);
 
     useEffect(() => {
         const listener = emitter.addListener('mmHardwareKeyboardEvent', handleEvent);
 
         return () => listener.remove();
-    }, []);
+    }, [handleEvent]);
 }