fix(frontend): click on mention list on search bar in modal bug (#2098)

# Description

Please include a summary of the changes and the related issue. Please
also include relevant motivation and context.

## Checklist before requesting a review

Please delete options that are not relevant.

- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my code
- [ ] I have commented hard-to-understand areas
- [ ] I have ideally added tests that prove my fix is effective or that
my feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged

## Screenshots (if appropriate):

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}

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;
 

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);
     };
   }, []);