Left Search: Fix <Esc> hotkey behavior (#1977)

src/components/left/LeftColumn.tsx

@@ -8,6 +8,7 @@ import { LeftColumnContent, SettingsScreens } from '../../types';
 
 import { IS_MAC_OS, IS_PWA, LAYERS_ANIMATION_NAME } from '../../util/environment';
 import captureEscKeyListener from '../../util/captureEscKeyListener';
+import { selectCurrentChat } from '../../global/selectors';
 import useFoldersReducer from '../../hooks/reducers/useFoldersReducer';
 import { useResize } from '../../hooks/useResize';
 import { useHotkeys } from '../../hooks/useHotkeys';
@@ -24,12 +25,13 @@ import './LeftColumn.scss';
 type StateProps = {
   searchQuery?: string;
   searchDate?: number;
-  activeChatFolder: number;
+  isFirstChatFolderActive: boolean;
   shouldSkipHistoryAnimations?: boolean;
   leftColumnWidth?: number;
   currentUserId?: string;
   hasPasscode?: boolean;
   nextSettingsScreen?: SettingsScreens;
+  isChatOpen: boolean;
 };
 
 enum ContentType {
@@ -49,12 +51,13 @@ const RESET_TRANSITION_DELAY_MS = 250;
 const LeftColumn: FC<StateProps> = ({
   searchQuery,
   searchDate,
-  activeChatFolder,
+  isFirstChatFolderActive,
   shouldSkipHistoryAnimations,
   leftColumnWidth,
   currentUserId,
   hasPasscode,
   nextSettingsScreen,
+  isChatOpen,
 }) => {
   const {
     setGlobalSearchQuery,
@@ -276,14 +279,15 @@ const LeftColumn: FC<StateProps> = ({
       }
     }
 
-    if (content === LeftColumnContent.ChatList && activeChatFolder === 0) {
+    if (content === LeftColumnContent.ChatList && isFirstChatFolderActive) {
       setContent(LeftColumnContent.GlobalSearch);
+
       return;
     }
 
     fullReset();
   }, [
-    content, activeChatFolder, settingsScreen, setGlobalSearchQuery, setGlobalSearchDate, setGlobalSearchChatId,
+    content, isFirstChatFolderActive, settingsScreen, setGlobalSearchQuery, setGlobalSearchDate, setGlobalSearchChatId,
     resetChatCreation, hasPasscode,
   ]);
 
@@ -301,10 +305,10 @@ const LeftColumn: FC<StateProps> = ({
   }, [content, searchQuery, setGlobalSearchQuery]);
 
   useEffect(
-    () => (content !== LeftColumnContent.ChatList || activeChatFolder === 0
+    () => (content !== LeftColumnContent.ChatList || (isFirstChatFolderActive && !isChatOpen)
       ? captureEscKeyListener(() => handleReset())
       : undefined),
-    [activeChatFolder, content, handleReset],
+    [isFirstChatFolderActive, content, handleReset, isChatOpen],
   );
 
   const handleHotkeySearch = useCallback((e: KeyboardEvent) => {
@@ -462,15 +466,18 @@ export default memo(withGlobal(
       },
     } = global;
 
+    const isChatOpen = Boolean(selectCurrentChat(global)?.id);
+
     return {
       searchQuery: query,
       searchDate: date,
-      activeChatFolder,
+      isFirstChatFolderActive: activeChatFolder === 0,
       shouldSkipHistoryAnimations,
       leftColumnWidth,
       currentUserId,
       hasPasscode,
       nextSettingsScreen,
+      isChatOpen,
     };
   },
 )(LeftColumn));

src/components/left/main/ChatFolders.tsx

@@ -39,6 +39,7 @@ type StateProps = {
 };
 
 const SAVED_MESSAGES_HOTKEY = '0';
+const FIRST_FOLDER_INDEX = 0;
 
 const ChatFolders: FC<OwnProps & StateProps> = ({
   foldersDispatch,
@@ -68,7 +69,7 @@ const ChatFolders: FC<OwnProps & StateProps> = ({
     }
   }, [lastSyncTime, loadChatFolders]);
 
-  const defaultFolder = useMemo(() => {
+  const allChatsFolder = useMemo(() => {
     return {
       id: ALL_FOLDER_ID,
       title: orderedFolderIds?.[0] === ALL_FOLDER_ID ? lang('FilterAllChatsShort') : lang('FilterAllChats'),
@@ -79,15 +80,17 @@ const ChatFolders: FC<OwnProps & StateProps> = ({
     return orderedFolderIds
       ? orderedFolderIds.map((id) => {
         if (id === ALL_FOLDER_ID) {
-          return defaultFolder;
+          return allChatsFolder;
         }
+
         return chatFoldersById[id] || {};
       }).filter(Boolean)
       : undefined;
-  }, [chatFoldersById, defaultFolder, orderedFolderIds]);
+  }, [chatFoldersById, allChatsFolder, orderedFolderIds]);
 
-  const allFolderIndex = displayedFolders?.findIndex((folder) => folder.id === 0);
-  const isInAllFolder = allFolderIndex === activeChatFolder;
+  const allChatsFolderIndex = displayedFolders?.findIndex((folder) => folder.id === ALL_FOLDER_ID);
+  const isInAllChatsFolder = allChatsFolderIndex === activeChatFolder;
+  const isInFirstFolder = FIRST_FOLDER_INDEX === activeChatFolder;
 
   const folderCountersById = useFolderManagerForUnreadCounters();
   const folderTabs = useMemo(() => {
@@ -119,9 +122,9 @@ const ChatFolders: FC<OwnProps & StateProps> = ({
     }
 
     if (activeChatFolder >= folderTabs.length) {
-      setActiveChatFolder(allFolderIndex);
+      setActiveChatFolder(FIRST_FOLDER_INDEX);
     }
-  }, [activeChatFolder, allFolderIndex, folderTabs, setActiveChatFolder]);
+  }, [activeChatFolder, folderTabs, setActiveChatFolder]);
 
   useEffect(() => {
     if (!transitionRef.current || !IS_TOUCH_ENV || !folderTabs || !folderTabs.length) {
@@ -144,17 +147,17 @@ const ChatFolders: FC<OwnProps & StateProps> = ({
     });
   }, [activeChatFolder, folderTabs, setActiveChatFolder]);
 
-  const isNotInAllTabRef = useRef();
-  isNotInAllTabRef.current = !isInAllFolder;
-  useEffect(() => (isNotInAllTabRef.current ? captureEscKeyListener(() => {
-    if (isNotInAllTabRef.current) {
-      setActiveChatFolder(allFolderIndex);
+  const isNotInFirstFolderRef = useRef();
+  isNotInFirstFolderRef.current = !isInFirstFolder;
+  useEffect(() => (isNotInFirstFolderRef.current ? captureEscKeyListener(() => {
+    if (isNotInFirstFolderRef.current) {
+      setActiveChatFolder(FIRST_FOLDER_INDEX);
     }
-  }) : undefined), [activeChatFolder, allFolderIndex, setActiveChatFolder]);
+  }) : undefined), [activeChatFolder, setActiveChatFolder]);
 
   useHistoryBack({
-    isActive: !isInAllFolder,
-    onBack: () => setActiveChatFolder(allFolderIndex, { forceOnHeavyAnimation: true }),
+    isActive: !isInFirstFolder,
+    onBack: () => setActiveChatFolder(FIRST_FOLDER_INDEX, { forceOnHeavyAnimation: true }),
   });
 
   useEffect(() => {
@@ -191,7 +194,7 @@ const ChatFolders: FC<OwnProps & StateProps> = ({
     const activeFolder = Object.values(chatFoldersById)
       .find(({ id }) => id === folderTabs![activeChatFolder].id);
 
-    if (!activeFolder || isInAllFolder) {
+    if (!activeFolder || isInAllChatsFolder) {
       return (
         <ChatList
           folderType="all"

src/components/left/main/LeftMainHeader.tsx

@@ -1,5 +1,7 @@
 import type { FC } from '../../../lib/teact/teact';
-import React, { memo, useCallback, useMemo } from '../../../lib/teact/teact';
+import React, {
+  memo, useCallback, useEffect, useMemo,
+} from '../../../lib/teact/teact';
 import { getActions, withGlobal } from '../../../global';
 
 import type { ISettings } from '../../../types';
@@ -29,6 +31,7 @@ import useLang from '../../../hooks/useLang';
 import useConnectionStatus from '../../../hooks/useConnectionStatus';
 import { useHotkeys } from '../../../hooks/useHotkeys';
 import { getPromptInstall } from '../../../util/installPrompt';
+import captureEscKeyListener from '../../../util/captureEscKeyListener';
 
 import DropdownMenu from '../../ui/DropdownMenu';
 import MenuItem from '../../ui/MenuItem';
@@ -235,6 +238,8 @@ const LeftMainHeader: FC<OwnProps & StateProps> = ({
     || content === LeftColumnContent.Contacts
   );
 
+  useEffect(() => (isSearchFocused ? captureEscKeyListener(() => onReset()) : undefined), [isSearchFocused, onReset]);
+
   const searchInputPlaceholder = content === LeftColumnContent.Contacts
     ? lang('SearchFriends')
     : lang('Search');