diff --git a/web/chat/chat-message-list-container.react.js b/web/chat/chat-message-list-container.react.js
--- a/web/chat/chat-message-list-container.react.js
+++ b/web/chat/chat-message-list-container.react.js
@@ -21,6 +21,7 @@
 
 import { InputStateContext } from '../input/input-state';
 import { useSelector } from '../redux/redux-utils';
+import { newThreadID } from '../selectors/nav-selectors';
 import { updateNavInfoActionType } from '../types/nav-types';
 import ChatInputBar from './chat-input-bar.react';
 import css from './chat-message-list-container.css';
@@ -53,7 +54,6 @@
     }),
   );
 
-  const newThreadID = 'pending/new_thread';
   const pendingNewThread = React.useMemo(
     () => ({
       ...createPendingThread({
diff --git a/web/chat/chat-thread-composer.react.js b/web/chat/chat-thread-composer.react.js
--- a/web/chat/chat-thread-composer.react.js
+++ b/web/chat/chat-thread-composer.react.js
@@ -5,6 +5,7 @@
 
 import { userSearchIndexForPotentialMembers } from 'lib/selectors/user-selectors';
 import { getPotentialMemberItems } from 'lib/shared/search-utils';
+import { threadIsPending } from 'lib/shared/thread-utils';
 import type { AccountUserInfo, UserListItem } from 'lib/types/user-types';
 
 import Label from '../components/label.react';
@@ -22,6 +23,8 @@
   +inputState: InputState,
 };
 
+type ThreadIDBehaviour = 'clear' | 'keep';
+
 function ChatThreadComposer(props: Props): React.Node {
   const { userInfoInputArray, otherUserInfos, threadID, inputState } = props;
 
@@ -105,15 +108,21 @@
     usernameInputText,
   ]);
 
-  const hideSearch = React.useCallback(() => {
-    dispatch({
-      type: updateNavInfoActionType,
-      payload: {
-        chatMode: 'view',
-        activeChatThreadID: threadID,
-      },
-    });
-  }, [dispatch, threadID]);
+  const hideSearch = React.useCallback(
+    (threadIDBehaviour: ThreadIDBehaviour = 'keep') => {
+      dispatch({
+        type: updateNavInfoActionType,
+        payload: {
+          chatMode: 'view',
+          activeChatThreadID:
+            threadIDBehaviour === 'keep' || !threadIsPending(threadID)
+              ? threadID
+              : '',
+        },
+      });
+    },
+    [dispatch, threadID],
+  );
 
   const tagsList = React.useMemo(() => {
     if (!userInfoInputArray?.length) {
@@ -155,7 +164,12 @@
             placeholder="Select users for chat"
           />
         </div>
-        <div className={css.closeSearch} onClick={hideSearch}>
+        <div
+          className={css.closeSearch}
+          onClick={() => {
+            hideSearch('clear');
+          }}
+        >
           <SWMansionIcon size={25} icon="cross" />
         </div>
       </div>
diff --git a/web/selectors/nav-selectors.js b/web/selectors/nav-selectors.js
--- a/web/selectors/nav-selectors.js
+++ b/web/selectors/nav-selectors.js
@@ -128,6 +128,8 @@
   },
 );
 
+const newThreadID = 'pending/new_thread';
+
 function useOnClickThread(
   thread: ?ThreadInfo,
 ): (event: SyntheticEvent<HTMLElement>) => void {
@@ -140,7 +142,15 @@
       );
       event.preventDefault();
       const { id: threadID } = thread;
-      if (threadID.includes('pending')) {
+      if (threadID === newThreadID) {
+        dispatch({
+          type: updateNavInfoActionType,
+          payload: {
+            chatMode: 'view',
+            activeChatThreadID: '',
+          },
+        });
+      } else if (threadID.includes('pending')) {
         dispatch({
           type: updateNavInfoActionType,
           payload: {
@@ -236,6 +246,7 @@
   useThreadIsActive,
   useOnClickPendingSidebar,
   useOnClickNewThread,
+  newThreadID,
   navTabSelector,
   navSettingsSectionSelector,
 };