stream-chat-react 13.6.0 → 13.6.1

package/dist/components/Chat/hooks/useChat.js

@@ -24,7 +24,7 @@ export const useChat = ({ client, defaultLanguage = 'en', i18nInstance, initialN
     useEffect(() => {
         if (!client)
             return;
-        const version = "13.6.0";
+        const version = "13.6.1";
         const userAgent = client.getUserAgent();
         if (!userAgent.includes('stream-chat-react')) {
             // result looks like: 'stream-chat-react-2.3.2-stream-chat-javascript-client-browser-2.2.2'

package/dist/components/Message/utils.js

@@ -135,14 +135,14 @@ export const getMessageActions = (actions, { canDelete, canEdit, canFlag, canMar
         messageActionsAfterPermission.push(MESSAGE_ACTIONS.react);
     }
     if (channelConfig?.['user_message_reminders'] &&
-        messageActions.indexOf(MESSAGE_ACTIONS.remindMe)) {
+        messageActions.indexOf(MESSAGE_ACTIONS.remindMe) > -1) {
         messageActionsAfterPermission.push(MESSAGE_ACTIONS.remindMe);
     }
     if (canReply && messageActions.indexOf(MESSAGE_ACTIONS.reply) > -1) {
         messageActionsAfterPermission.push(MESSAGE_ACTIONS.reply);
     }
     if (channelConfig?.['user_message_reminders'] &&
-        messageActions.indexOf(MESSAGE_ACTIONS.saveForLater)) {
+        messageActions.indexOf(MESSAGE_ACTIONS.saveForLater) > -1) {
         messageActionsAfterPermission.push(MESSAGE_ACTIONS.saveForLater);
     }
     return messageActionsAfterPermission;

package/dist/components/TextareaComposer/TextareaComposer.js

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import Textarea from 'react-textarea-autosize';
 import { useMessageComposer } from '../MessageInput';
 import { useComponentContext, useMessageInputContext, useTranslationContext, } from '../../context';
@@ -116,7 +116,6 @@ export const TextareaComposer = ({ className, closeSuggestionsOnClickOutside, co
                 event.preventDefault();
             }
             handleSubmit();
-            textareaRef.current.selectionEnd = 0;
         }
     }, [
         focusedItemIndex,
@@ -135,23 +134,13 @@ export const TextareaComposer = ({ className, closeSuggestionsOnClickOutside, co
             textComposer.closeSuggestions();
         }
     }, [onScroll, textComposer]);
-    const setSelectionDebounced = useCallback((e) => {
+    const setSelection = useCallback((e) => {
         onSelect?.(e);
         textComposer.setSelection({
             end: e.target.selectionEnd,
             start: e.target.selectionStart,
         });
     }, [onSelect, textComposer]);
-    useEffect(() => {
-        // FIXME: find the real reason for cursor being set to the end on each change
-        // This is a workaround to prevent the cursor from jumping
-        // to the end of the textarea when the user is typing
-        // at the position that is not at the end of the textarea value.
-        if (textareaRef.current && !isComposing) {
-            textareaRef.current.selectionStart = selection.start;
-            textareaRef.current.selectionEnd = selection.end;
-        }
-    }, [text, textareaRef, selection.start, selection.end, isComposing]);
     useEffect(() => {
         if (textComposer.suggestions) {
             setFocusedItemIndex(0);
@@ -163,24 +152,26 @@ export const TextareaComposer = ({ className, closeSuggestionsOnClickOutside, co
             return;
         textareaRef.current.focus();
     }, [attachments, focus, quotedMessage, textareaRef]);
-    useEffect(() => {
+    useLayoutEffect(() => {
         /**
-         * The textarea value has to be overridden outside the render cycle so that the events like compositionend can be triggered.
-         * If we have overridden the value during the component rendering, the compositionend event would not be triggered, and
-         * it would not be possible to type composed characters (ô).
-         * On the other hand, just removing the value override via prop (value={text}) would not allow us to change the text based on
-         * middleware results (e.g. replace characters with emojis)
+         * It is important to perform set text and after that the range
+         * to prevent cursor reset to the end of the textarea if doing it in separate effects.
          */
         const textarea = textareaRef.current;
-        if (!textarea)
+        if (!textarea || isComposing)
+            return;
+        const length = textarea.value.length;
+        const start = Math.max(0, Math.min(selection.start, length));
+        const end = Math.max(start, Math.min(selection.end, length));
+        if (textarea.selectionStart === start && textarea.selectionEnd === end)
             return;
-        textarea.value = text;
-    }, [textareaRef, text]);
+        textarea.setSelectionRange(start, end, 'forward');
+    }, [text, selection.start, selection.end, isComposing, textareaRef]);
     return (React.createElement("div", { className: clsx('rta', 'str-chat__textarea str-chat__message-textarea-react-host', containerClassName, {
             ['rta--loading']: isLoadingItems,
         }), ref: containerRef },
-        React.createElement(Textarea, { ...additionalTextareaProps, ...restTextareaProps, "aria-label": cooldownRemaining ? t('Slow Mode ON') : placeholder, className: clsx('rta__textarea', 'str-chat__textarea__textarea str-chat__message-textarea', className), "data-testid": 'message-input', disabled: !enabled || !!cooldownRemaining, maxRows: maxRows, minRows: minRows, onBlur: onBlur, onChange: changeHandler, onCompositionEnd: onCompositionEnd, onCompositionStart: onCompositionStart, onKeyDown: keyDownHandler, onPaste: onPaste, onScroll: scrollHandler, onSelect: setSelectionDebounced, placeholder: placeholder || t('Type your message'), ref: (ref) => {
+        React.createElement(Textarea, { ...additionalTextareaProps, ...restTextareaProps, "aria-label": cooldownRemaining ? t('Slow Mode ON') : placeholder, className: clsx('rta__textarea', 'str-chat__textarea__textarea str-chat__message-textarea', className), "data-testid": 'message-input', disabled: !enabled || !!cooldownRemaining, maxRows: maxRows, minRows: minRows, onBlur: onBlur, onChange: changeHandler, onCompositionEnd: onCompositionEnd, onCompositionStart: onCompositionStart, onKeyDown: keyDownHandler, onPaste: onPaste, onScroll: scrollHandler, onSelect: setSelection, placeholder: placeholder || t('Type your message'), ref: (ref) => {
                 textareaRef.current = ref;
-            } }),
+            }, value: text }),
         !isComposing && (React.createElement(AutocompleteSuggestionList, { className: listClassName, closeOnClickOutside: closeSuggestionsOnClickOutside, focusedItemIndex: focusedItemIndex, setFocusedItemIndex: setFocusedItemIndex }))));
 };