fix: remove props spreading on React.Fragment (dragAndDropWindow) (#1835)

Author: arnautov-anton

src/components/Channel/Channel.tsx

@@ -916,11 +916,6 @@ const ChannelInner = <
     typing,
   });
 
-  const OptionalMessageInputProvider = useMemo(
-    () => (dragAndDropWindow ? DropzoneProvider : React.Fragment),
-    [dragAndDropWindow],
-  );
-
   const className = clsx(chatClass, theme, channelClass);
 
   if (state.error) {
@@ -955,9 +950,10 @@ const ChannelInner = <
             <EmojiProvider value={emojiContextValue}>
               <TypingProvider value={typingContextValue}>
                 <div className={`${chatContainerClass}`}>
-                  <OptionalMessageInputProvider {...optionalMessageInputProps}>
-                    {children}
-                  </OptionalMessageInputProvider>
+                  {dragAndDropWindow && (
+                    <DropzoneProvider {...optionalMessageInputProps}>{children}</DropzoneProvider>
+                  )}
+                  {!dragAndDropWindow && <>{children}</>}
                 </div>
               </TypingProvider>
             </EmojiProvider>

src/components/MessageInput/MessageInput.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren, useMemo } from 'react';
+import React, { PropsWithChildren } from 'react';
 import type { Message } from 'stream-chat';
 
 import { DefaultTriggerProvider } from './DefaultTriggerProvider';
@@ -126,17 +126,22 @@ const UnMemoizedMessageInput = <
   >('MessageInput');
 
   const Input = PropInput || ContextInput || MessageInputFlat;
-  const OptionalMessageInputProvider = useMemo(
-    () => (dragAndDropWindow ? React.Fragment : MessageInputProvider),
-    [dragAndDropWindow],
-  );
+
+  if (dragAndDropWindow)
+    return (
+      <>
+        <TriggerProvider>
+          <Input />
+        </TriggerProvider>
+      </>
+    );
 
   return (
-    <OptionalMessageInputProvider {...props}>
+    <MessageInputProvider {...props}>
       <TriggerProvider>
         <Input />
       </TriggerProvider>
-    </OptionalMessageInputProvider>
+    </MessageInputProvider>
   );
 };