fix: MessageList - random clicks while scroll to parent(#607)

Clicks were triggered on preceding messages while scrolling
This opens other thumbnail messages on the way to parent
Avoid this by disabling events on MessageList

fixes: https://sendbird.atlassian.net/browse/UIKIT-4048

Author: Sravan S

src/modules/Channel/context/hooks/useScrollToMessage.ts

@@ -15,6 +15,25 @@ interface StaticParams {
   logger: Logger;
 }
 
+// To prevent multiple clicks on the message in the channel while scrolling
+function deactivateClick(scrollRef: React.RefObject<HTMLDivElement>) {
+  const element = scrollRef.current;
+  const parentNode = element?.parentNode as HTMLDivElement;
+  if (element && parentNode) {
+    element.style.pointerEvents = 'none';
+    parentNode.style.cursor = 'wait';
+  }
+}
+
+function activateClick(scrollRef: React.RefObject<HTMLDivElement>) {
+  const element = scrollRef.current;
+  const parentNode = element?.parentNode as HTMLDivElement;
+  if (element && parentNode) {
+    element.style.pointerEvents = 'auto';
+    parentNode.style.cursor = 'auto';
+  }
+}
+
 function useScrollToMessage({
   setInitialTimeStamp,
   setAnimatedMessageId,
@@ -30,15 +49,22 @@ function useScrollToMessage({
       ));
       setAnimatedMessageId(null);
       setTimeout(() => {
-        if (isPresent) {
-          logger.info('Channel: scroll to message - message is present');
-          setAnimatedMessageId(messageId);
-          scrollToRenderedMessage(scrollRef, createdAt);
-        } else {
-          logger.info('Channel: scroll to message - fetching older messages');
-          setInitialTimeStamp(null);
-          setInitialTimeStamp(createdAt);
-          setAnimatedMessageId(messageId);
+        try {
+          logger.info('Channel: scroll to message - disabling mouse events');
+          deactivateClick(scrollRef);
+          if (isPresent) {
+            logger.info('Channel: scroll to message - message is present');
+            setAnimatedMessageId(messageId);
+            scrollToRenderedMessage(scrollRef, createdAt);
+          } else {
+            logger.info('Channel: scroll to message - fetching older messages');
+            setInitialTimeStamp(null);
+            setInitialTimeStamp(createdAt);
+            setAnimatedMessageId(messageId);
+          }
+        } finally {
+          logger.info('Channel: scroll to message - enabled mouse events');
+          activateClick(scrollRef);
         }
       });
     }, [

src/ui/QuoteMessage/index.tsx

@@ -33,7 +33,7 @@ export default function QuoteMessage({
   message,
   userId = '',
   isByMe = false,
-  className,
+  className = '',
   isUnavailable = false,
   onClick,
 }: Props): ReactElement {