update scroll to conversation

setupTests.js

@@ -51,6 +51,24 @@ jest.mock('axios', () => {
   };
 });
 
+class ResizeObserver {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+}
+global.ResizeObserver = ResizeObserver;
+
+// Mock IntersectionObserver
+class IntersectionObserver {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+  takeRecords() {
+    return [];
+  }
+}
+global.IntersectionObserver = IntersectionObserver;
+
 window.TextEncoder = encoding.TextEncoder;
 window.TextDecoder = encoding.TextDecoder;
 

src/script/page/LeftSidebar/panels/Conversations/ConversationsList.test.tsx

@@ -89,12 +89,14 @@ describe('ConversationsList', () => {
     );
 
   it("should render all 1:1 conversations if there's no search filter", () => {
-    const unserNames = ['Alice', 'Bob', 'Charlie'];
-    const conversations = unserNames.map(create1to1Conversation);
+    const userNames = ['Alice', 'Bob', 'Charlie'];
+    const conversations = userNames.map(create1to1Conversation);
+
+    window.Element.prototype.getBoundingClientRect = jest.fn().mockReturnValue({height: 1000, width: 1000});
 
     const {getByText} = renderComponent(conversations);
 
-    unserNames.forEach(userName => {
+    userNames.forEach(userName => {
       expect(getByText(userName)).toBeDefined();
     });
   });

src/script/page/LeftSidebar/panels/Conversations/ConversationsList.tsx

@@ -41,7 +41,7 @@ import {matchQualifiedIds} from 'Util/QualifiedId';
 
 import {ConnectionRequests} from './ConnectionRequests';
 import {conversationsList, headingTitle, noResultsMessage} from './ConversationsList.styles';
-import {conversationSearchFilter, scrollToConversation} from './helpers';
+import {conversationSearchFilter} from './helpers';
 
 import {CallState} from '../../../../calling/CallState';
 import {ConversationState} from '../../../../conversation/ConversationState';
@@ -127,6 +127,19 @@ export const ConversationsList = ({
     listViewModel.contentViewModel.switchContent(ContentState.CONNECTION_REQUESTS);
   };
 
+  const isFolderView = currentTab === SidebarTabs.FOLDER;
+  const filteredConversations =
+    (isFolderView && currentFolder?.conversations().filter(conversationSearchFilter(conversationsFilter))) || [];
+  const conversationsToDisplay = filteredConversations.length ? filteredConversations : conversations;
+
+  const parentRef = useRef(null);
+
+  const rowVirtualizer = useVirtualizer({
+    count: conversationsToDisplay.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => 56,
+  });
+
   const onConversationClick = useCallback(
     (conversation: Conversation) =>
       (event: ReactMouseEvent<HTMLDivElement, MouseEvent> | ReactKeyBoardEvent<HTMLDivElement>) => {
@@ -164,23 +177,16 @@ export const ConversationsList = ({
 
   useEffect(() => {
     if (!conversationsFilter && clickedFilteredConversationId) {
-      scrollToConversation(clickedFilteredConversationId);
-      setClickedFilteredConversationId(null);
-    }
-  }, [conversationsFilter, clickedFilteredConversationId]);
+      const conversationIndex = conversationsToDisplay.findIndex(conv => conv.id === clickedFilteredConversationId);
 
-  const isFolderView = currentTab === SidebarTabs.FOLDER;
-  const filteredConversations =
-    (isFolderView && currentFolder?.conversations().filter(conversationSearchFilter(conversationsFilter))) || [];
-  const conversationsToDisplay = filteredConversations.length ? filteredConversations : conversations;
-
-  const parentRef = useRef(null);
+      if (conversationIndex !== -1) {
+        rowVirtualizer.scrollToIndex(conversationIndex, {align: 'center'});
+      }
 
-  const rowVirtualizer = useVirtualizer({
-    count: conversationsToDisplay.length,
-    getScrollElement: () => parentRef.current,
-    estimateSize: () => 56,
-  });
+      // scrollToConversation(clickedFilteredConversationId);
+      setClickedFilteredConversationId(null);
+    }
+  }, [conversationsFilter, clickedFilteredConversationId, conversationsToDisplay]);
 
   return (
     <>