From f8544cf14bcd90e2a097d1e2f26dc265938b95e4 Mon Sep 17 00:00:00 2001
From: ayaan-qadri <develop.ayaan@gmail.com>
Date: Sun, 13 Oct 2024 10:42:35 +0530
Subject: [PATCH] Added Scrollbar visible when popup is opened

---
 .../src/conversation/ConversationTile.tsx     | 33 +++++++++++++++++--
 1 file changed, 30 insertions(+), 3 deletions(-)

diff --git a/frontend/src/conversation/ConversationTile.tsx b/frontend/src/conversation/ConversationTile.tsx
index 0651447f..dd3e6e1d 100644
--- a/frontend/src/conversation/ConversationTile.tsx
+++ b/frontend/src/conversation/ConversationTile.tsx
@@ -1,4 +1,10 @@
-import { SyntheticEvent, useEffect, useRef, useState } from 'react';
+import {
+  SyntheticEvent,
+  useEffect,
+  useRef,
+  useState,
+  useCallback,
+} from 'react';
 import { useSelector } from 'react-redux';
 import Edit from '../assets/edit.svg';
 import Exit from '../assets/exit.svg';
@@ -76,12 +82,33 @@ export default function ConversationTile({
     };
   }, []);
 
+  const preventScroll = useCallback((event: WheelEvent | TouchEvent) => {
+    event.preventDefault();
+  }, []);
+
   useEffect(() => {
     const conversationsMainDiv = document.getElementById(
       'conversationsMainDiv',
     );
-    conversationsMainDiv &&
-      (conversationsMainDiv.style.overflowY = isOpen ? 'hidden' : 'auto');
+
+    if (conversationsMainDiv) {
+      if (isOpen) {
+        conversationsMainDiv.addEventListener('wheel', preventScroll, {
+          passive: false,
+        });
+        conversationsMainDiv.addEventListener('touchmove', preventScroll, {
+          passive: false,
+        });
+      } else {
+        conversationsMainDiv.removeEventListener('wheel', preventScroll);
+        conversationsMainDiv.removeEventListener('touchmove', preventScroll);
+      }
+
+      return () => {
+        conversationsMainDiv.removeEventListener('wheel', preventScroll);
+        conversationsMainDiv.removeEventListener('touchmove', preventScroll);
+      };
+    }
   }, [isOpen]);
 
   function onClear() {