diff --git a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatEditor/components/Editor/components/MentionsList/MentionsList.tsx b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatEditor/components/Editor/components/MentionsList/MentionsList.tsx
index d341356108f8..60f781a93190 100644
--- a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatEditor/components/Editor/components/MentionsList/MentionsList.tsx
+++ b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatEditor/components/Editor/components/MentionsList/MentionsList.tsx
@@ -24,8 +24,16 @@ export const MentionList = forwardRef<MentionListRef, MentionListProps>(
     const { suggestionsRef, shouldShowScrollToBottomIcon, scrollToBottom } =
       useSuggestionsOverflowHandler();
 
+    const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {
+      event.preventDefault();
+      event.stopPropagation();
+    };
+
     return (
-      <div className="items flex flex-1 flex-col p-2 px-4 bg-gray-50 rounded-md shadow-md z-40 max-h-[200px]">
+      <div
+        className="items flex flex-1 flex-col p-2 px-4 bg-gray-50 rounded-md shadow-md z-40 max-h-[200px]"
+        onClick={handleClick}
+      >
         <div
           className="flex flex-1 flex-col overflow-y-auto"
           ref={suggestionsRef}
diff --git a/frontend/lib/components/SearchModal/SearchModal.module.scss b/frontend/lib/components/SearchModal/SearchModal.module.scss
index ca873478f78e..6cc5902c8d3e 100644
--- a/frontend/lib/components/SearchModal/SearchModal.module.scss
+++ b/frontend/lib/components/SearchModal/SearchModal.module.scss
@@ -5,12 +5,11 @@
 
 .search_modal_wrapper {
   display: flex;
-  background-color: Colors.$dark-black;
+  background-color: rgba(Colors.$dark-black, 0.94);
   height: 100%;
   width: 100%;
   position: absolute;
   z-index: ZIndexes.$modal;
-  opacity: 0.94;
   align-items: center;
   justify-content: center;
 
diff --git a/frontend/lib/components/SearchModal/SearchModal.tsx b/frontend/lib/components/SearchModal/SearchModal.tsx
index a845279cbcf4..9a70456f7a86 100644
--- a/frontend/lib/components/SearchModal/SearchModal.tsx
+++ b/frontend/lib/components/SearchModal/SearchModal.tsx
@@ -10,10 +10,6 @@ export const SearchModal = (): JSX.Element => {
   const { isVisible, setIsVisible } = useSearchModalContext();
   const searchBarRef = useRef(null);
 
-  useEffect(() => {
-    console.log(`isVisible has changed to: ${isVisible}`);
-  }, [isVisible]);
-
   const keydownHandler = ({
     key,
     metaKey,
@@ -28,7 +24,7 @@ export const SearchModal = (): JSX.Element => {
     }
   };
 
-  const mousedownHandler = (event: MouseEvent) => {
+  const clickHandler = (event: MouseEvent) => {
     if (
       !(searchBarRef.current as HTMLElement | null)?.contains(
         event.target as Node
@@ -43,12 +39,12 @@ export const SearchModal = (): JSX.Element => {
   };
 
   useEffect(() => {
-    document.addEventListener("keydown", keydownHandler);
-    window.addEventListener("click", mousedownHandler);
+    window.addEventListener("keydown", keydownHandler);
+    window.addEventListener("click", clickHandler);
 
     return () => {
-      document.removeEventListener("keydown", keydownHandler);
-      window.removeEventListener("click", mousedownHandler);
+      window.removeEventListener("keydown", keydownHandler);
+      window.removeEventListener("click", clickHandler);
     };
   }, []);