diff --git a/lib/hooks/search-sidebars.js b/lib/hooks/search-sidebars.js
index 1f97415cf..24a7aac6c 100644
--- a/lib/hooks/search-sidebars.js
+++ b/lib/hooks/search-sidebars.js
@@ -1,81 +1,97 @@
 // @flow
 
 import * as React from 'react';
 
 import { sidebarInfoSelector } from '../selectors/thread-selectors';
 import SearchIndex from '../shared/search-index';
 import { threadSearchText } from '../shared/thread-utils';
 import type { SetState } from '../types/hook-types';
 import type { SidebarInfo, ThreadInfo } from '../types/thread-types';
 import { useSelector } from '../utils/redux-utils';
 
 type SidebarSearchState = {
   +text: string,
   +results: $ReadOnlySet<string>,
 };
 
 function useSearchSidebars(
   threadInfo: ThreadInfo,
 ): {
   +listData: $ReadOnlyArray<SidebarInfo>,
   +searchState: SidebarSearchState,
   +setSearchState: SetState<SidebarSearchState>,
   +onChangeSearchInputText: (text: string) => mixed,
+  +clearQuery: (event: SyntheticEvent<HTMLAnchorElement>) => void,
 } {
   const [searchState, setSearchState] = React.useState({
     text: '',
     results: new Set<string>(),
   });
 
   const userInfos = useSelector(state => state.userStore.userInfos);
 
   const sidebarInfos = useSelector(
     state => sidebarInfoSelector(state)[threadInfo.id] ?? [],
   );
 
   const listData = React.useMemo(() => {
     if (!searchState.text) {
       return sidebarInfos;
     }
     return sidebarInfos.filter(sidebarInfo =>
       searchState.results.has(sidebarInfo.threadInfo.id),
     );
   }, [sidebarInfos, searchState]);
 
   const viewerID = useSelector(
     state => state.currentUserInfo && state.currentUserInfo.id,
   );
   const searchIndex = React.useMemo(() => {
     const index = new SearchIndex();
     for (const sidebarInfo of sidebarInfos) {
       const threadInfoFromSidebarInfo = sidebarInfo.threadInfo;
       index.addEntry(
         threadInfoFromSidebarInfo.id,
         threadSearchText(threadInfoFromSidebarInfo, userInfos, viewerID),
       );
     }
     return index;
   }, [sidebarInfos, userInfos, viewerID]);
 
   const onChangeSearchInputText = React.useCallback(
     (text: string) => {
       setSearchState({
         text,
         results: new Set(searchIndex.getSearchResults(text)),
       });
     },
     [searchIndex, setSearchState],
   );
 
+  const clearQuery = React.useCallback(
+    (event: SyntheticEvent<HTMLAnchorElement>) => {
+      event.preventDefault();
+      setSearchState({ text: '', results: new Set() });
+    },
+    [setSearchState],
+  );
+
   return React.useMemo(
     () => ({
       listData,
       searchState,
       setSearchState,
       onChangeSearchInputText,
+      clearQuery,
     }),
-    [listData, setSearchState, searchState, onChangeSearchInputText],
+    [
+      listData,
+      setSearchState,
+      searchState,
+      onChangeSearchInputText,
+      clearQuery,
+    ],
   );
 }
 
 export { useSearchSidebars };
diff --git a/web/modals/chat/sidebar-list-modal.react.js b/web/modals/chat/sidebar-list-modal.react.js
index a888ca846..2635d69f7 100644
--- a/web/modals/chat/sidebar-list-modal.react.js
+++ b/web/modals/chat/sidebar-list-modal.react.js
@@ -1,104 +1,96 @@
 // @flow
 
 import { faTimesCircle } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import classNames from 'classnames';
 import * as React from 'react';
 
 import { useSearchSidebars } from 'lib/hooks/search-sidebars';
 import type { ThreadInfo } from 'lib/types/thread-types';
 
 import chatThreadListCSS from '../../chat/chat-thread-list.css';
 import SidebarItem from '../../chat/sidebar-item.react';
 import globalCSS from '../../style.css';
 import { MagnifyingGlass } from '../../vectors.react';
 import Input from '../input.react';
 import { useModalContext } from '../modal-provider.react';
 import Modal from '../modal.react';
 
 type Props = {
   +threadInfo: ThreadInfo,
 };
 
 function SidebarListModal(props: Props): React.Node {
   const { threadInfo } = props;
   const {
     listData,
     searchState,
-    setSearchState,
+    clearQuery,
     onChangeSearchInputText,
   } = useSearchSidebars(threadInfo);
   const { popModal } = useModalContext();
 
   const sidebars = React.useMemo(
     () =>
       listData.map(item => (
         <div
           className={classNames(
             chatThreadListCSS.thread,
             chatThreadListCSS.sidebar,
           )}
           key={item.threadInfo.id}
           onClick={popModal}
         >
           <SidebarItem sidebarInfo={item} />
         </div>
       )),
     [popModal, listData],
   );
 
-  const clearQuery = React.useCallback(
-    (event: SyntheticEvent<HTMLAnchorElement>) => {
-      event.preventDefault();
-      setSearchState({ text: '', results: new Set() });
-    },
-    [setSearchState],
-  );
-
   let clearQueryButton = null;
   if (searchState.text) {
     clearQueryButton = (
       <a href="#" onClick={clearQuery}>
         <FontAwesomeIcon
           icon={faTimesCircle}
           className={chatThreadListCSS.clearQuery}
         />
       </a>
     );
   }
 
   const handleOnChangeSearchText = React.useCallback(
     (event: SyntheticEvent<HTMLInputElement>) => {
       const { value } = event.currentTarget;
       onChangeSearchInputText(value);
     },
     [onChangeSearchInputText],
   );
 
   return (
     <Modal name="Sidebars" onClose={popModal}>
       <div
         className={classNames(
           globalCSS['modal-body'],
           globalCSS['resized-modal-body'],
         )}
       >
         <div>
           <div className={chatThreadListCSS.search}>
             <MagnifyingGlass className={chatThreadListCSS.searchVector} />
             <Input
               type="text"
               placeholder="Search sidebars"
               value={searchState.text}
               onChange={handleOnChangeSearchText}
             />
             {clearQueryButton}
           </div>
         </div>
         <ul className={chatThreadListCSS.list}>{sidebars}</ul>
       </div>
     </Modal>
   );
 }
 
 export default SidebarListModal;