Extend dialogManagerId's with dictinct strings to prevent UI clashes

Author: arnautov-anton

src/components/Dialog/DialogManager.ts

@@ -1,3 +1,4 @@
+import { nanoid } from 'nanoid';
 import { StateStore } from 'stream-chat';
 
 export type GetOrCreateDialogParams = {
@@ -43,7 +44,7 @@ export class DialogManager {
   });
 
   constructor({ id }: DialogManagerOptions = {}) {
-    this.id = id ?? new Date().getTime().toString();
+    this.id = id ?? nanoid();
   }
 
   get openDialogCount() {

src/components/Dialog/DialogPortal.tsx

@@ -18,7 +18,7 @@ export const DialogPortalDestination = () => {
           '--str-chat__dialog-overlay-height': openedDialogCount > 0 ? '100%' : '0',
         } as React.CSSProperties
       }
-    ></div>
+    />
   );
 };
 

src/components/Dialog/__tests__/DialogsManager.test.js

@@ -1,4 +1,5 @@
 import { DialogManager } from '../DialogManager';
+import * as nanoid from 'nanoid';
 
 const dialogId = 'dialogId';
 
@@ -10,11 +11,9 @@ describe('DialogManager', () => {
   });
 
   it('initiates with default options', () => {
-    const mockedId = '12345';
-    const spy = jest.spyOn(Date.prototype, 'getTime').mockReturnValueOnce(mockedId);
+    jest.spyOn(nanoid, 'nanoid').mockReturnValue('mockedId');
     const dialogManager = new DialogManager();
-    expect(dialogManager.id).toBe(mockedId);
-    spy.mockRestore();
+    expect(dialogManager.id).toBe('mockedId');
   });
 
   it('creates a new closed dialog', () => {

src/components/MessageInput/AttachmentSelector.tsx

@@ -1,9 +1,7 @@
-import { nanoid } from 'nanoid';
 import React, {
   ElementRef,
   useCallback,
   useEffect,
-  useMemo,
   useRef,
   useState,
 } from 'react';
@@ -25,16 +23,17 @@ import {
   AttachmentSelectorContextProvider,
   useAttachmentSelectorContext,
 } from '../../context/AttachmentSelectorContext';
+import { useStableId } from '../UtilityComponents/useStableId';
 import type { DefaultStreamChatGenerics } from '../../types';
 
 export const SimpleAttachmentSelector = () => {
   const {
     AttachmentSelectorInitiationButtonContents,
     FileUploadIcon = DefaultUploadIcon,
   } = useComponentContext();
-  const inputRef = useRef<ElementRef<'input'>>(null);
+  const inputRef = useRef<HTMLInputElement | null>(null);
   const [labelElement, setLabelElement] = useState<HTMLLabelElement | null>(null);
-  const id = useMemo(() => nanoid(), []);
+  const id = useStableId();
 
   useEffect(() => {
     if (!labelElement) return;

src/components/MessageInput/MessageInput.tsx

@@ -12,6 +12,8 @@ import {
 } from '../../context/ComponentContext';
 import { MessageInputContextProvider } from '../../context/MessageInputContext';
 import { DialogManagerProvider } from '../../context';
+import { useRegisterDropHandlers } from './WithDragAndDropUpload';
+import { useStableId } from '../UtilityComponents/useStableId';
 
 import type { Channel, Message, SendFileAPIResponse } from 'stream-chat';
 
@@ -26,7 +28,6 @@ import type {
 } from '../../types/types';
 import type { URLEnrichmentConfig } from './hooks/useLinkPreviews';
 import type { CustomAudioRecordingConfig } from '../MediaRecorder';
-import { useRegisterDropHandlers } from './WithDragAndDropUpload';
 
 export type EmojiSearchIndexResult = {
   id: string;
@@ -174,10 +175,12 @@ const UnMemoizedMessageInput = <
   const { Input: ContextInput, TriggerProvider = DefaultTriggerProvider } =
     useComponentContext<StreamChatGenerics, V>('MessageInput');
 
+  const id = useStableId();
+
   const Input = PropInput || ContextInput || MessageInputFlat;
   const dialogManagerId = props.isThreadInput
-    ? 'message-input-dialog-manager-thread'
-    : 'message-input-dialog-manager';
+    ? `message-input-dialog-manager-thread-${id}`
+    : `message-input-dialog-manager-${id}`;
 
   if (dragAndDropWindow)
     return (

src/components/MessageList/MessageList.tsx

@@ -34,9 +34,10 @@ import { LoadingIndicator as DefaultLoadingIndicator } from '../Loading';
 import { defaultPinPermissions, MESSAGE_ACTIONS } from '../Message/utils';
 import { TypingIndicator as DefaultTypingIndicator } from '../TypingIndicator';
 import { MessageListMainPanel as DefaultMessageListMainPanel } from './MessageListMainPanel';
-
+import { useStableId } from '../UtilityComponents/useStableId';
 import { defaultRenderMessages, MessageRenderer } from './renderMessages';
 
+
 import type { GroupStyle, ProcessMessagesParams } from './utils';
 import type { MessageProps } from '../Message/types';
 
@@ -225,10 +226,13 @@ const MessageListWithContext = <
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [highlightedMessageId]);
 
+  const id = useStableId();
+
   const showEmptyStateIndicator = elements.length === 0 && !threadList;
   const dialogManagerId = threadList
-    ? 'message-list-dialog-manager-thread'
-    : 'message-list-dialog-manager';
+    ? `message-list-dialog-manager-thread-${id}`
+    : `message-list-dialog-manager-${id}`;
+
   return (
     <MessageListContextProvider value={{ listElement, scrollToBottom }}>
       <MessageListMainPanel>

src/components/MessageList/VirtualizedMessageList.tsx

@@ -72,6 +72,7 @@ import type {
 } from 'stream-chat';
 import type { DefaultStreamChatGenerics, UnknownType } from '../../types/types';
 import { DEFAULT_NEXT_CHANNEL_PAGE_SIZE } from '../../constants/limits';
+import { useStableId } from '../UtilityComponents/useStableId';
 
 type PropsDrilledToMessage =
   | 'additionalMessageInputProps'
@@ -456,11 +457,13 @@ const VirtualizedMessageListWithContext = <
     };
   }, [highlightedMessageId, processedMessages]);
 
+  const id = useStableId();
+
   if (!processedMessages) return null;
 
   const dialogManagerId = threadList
-    ? 'virtualized-message-list-dialog-manager-thread'
-    : 'virtualized-message-list-dialog-manager';
+    ? `virtualized-message-list-dialog-manager-thread-${id}`
+    : `virtualized-message-list-dialog-manager-${id}`;
 
   return (
     <VirtualizedMessageListContextProvider value={{ scrollToBottom }}>

src/components/MessageList/__tests__/VirtualizedMessageList.test.js

@@ -1,5 +1,6 @@
 import React, { act } from 'react';
 import { cleanup, render } from '@testing-library/react';
+import * as nanoid from 'nanoid';
 
 import '@testing-library/jest-dom';
 
@@ -75,6 +76,8 @@ describe('VirtualizedMessageList', () => {
 
   it('should render the list without any message', async () => {
     const { channel, client } = await createChannel(true);
+    jest.spyOn(nanoid, 'nanoid').mockReturnValue('mockedId');
+
     let result;
     await act(() => {
       result = render(

src/components/MessageList/__tests__/__snapshots__/VirtualizedMessageList.test.js.snap

@@ -55,7 +55,7 @@ exports[`VirtualizedMessageList should render the list without any message 1`] =
         </div>
         <div
           class="str-chat__dialog-overlay"
-          data-str-chat__portal-id="virtualized-message-list-dialog-manager"
+          data-str-chat__portal-id="virtualized-message-list-dialog-manager-mockedId"
           data-testid="str-chat__dialog-overlay"
           style="--str-chat__dialog-overlay-height: 0;"
         />

src/components/UtilityComponents/useStableId.ts

@@ -0,0 +1,13 @@
+import { nanoid } from 'nanoid';
+import { useMemo } from 'react';
+
+/**
+ * The ID is generated using the `nanoid` library and is memoized to ensure
+ * that it remains the same across renders unless the key changes.
+ */
+export const useStableId = (key?: string) => {
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const id = useMemo(() => nanoid(), [key]);
+
+  return id;
+};