MM-60733 - tap reply button loses focus on subsequent clicks (matterm…

…ost#29501)

* MM-60733 - tap reply button lost focus

* add pr feedback, have the own effect for selectedPostFocussedAt

* remove function from dep array

webapp/channels/src/components/advanced_text_editor/advanced_text_editor.tsx

@@ -21,7 +21,7 @@ import * as GlobalActions from 'actions/global_actions';
 import {actionOnGlobalItemsWithPrefix} from 'actions/storage';
 import type {SubmitPostReturnType} from 'actions/views/create_comment';
 import {removeDraft, updateDraft} from 'actions/views/drafts';
-import {makeGetDraft} from 'selectors/rhs';
+import {getSelectedPostFocussedAt, makeGetDraft} from 'selectors/rhs';
 import {connectionErrorCount} from 'selectors/views/system';
 import LocalStorageStore from 'stores/local_storage_store';
 
@@ -122,6 +122,7 @@ const AdvancedTextEditor = ({
     const teammateId = useSelector((state: GlobalState) => getDirectChannel(state, channelId)?.teammate_id || '');
     const teammateDisplayName = useSelector((state: GlobalState) => (teammateId ? getDisplayName(state, teammateId) : ''));
     const showDndWarning = useSelector((state: GlobalState) => (teammateId ? getStatusForUserId(state, teammateId) === UserStatuses.DND : false));
+    const selectedPostFocussedAt = useSelector((state: GlobalState) => getSelectedPostFocussedAt(state));
 
     const canPost = useSelector((state: GlobalState) => {
         const channel = getChannel(state, channelId);
@@ -409,6 +410,14 @@ const AdvancedTextEditor = ({
         }
     }, [showPreview]);
 
+    // Focus textbox when selectedPostFocussedAt changes
+    useEffect(() => {
+        if (selectedPostFocussedAt) {
+            focusTextbox();
+        }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [selectedPostFocussedAt]);
+
     // Remove show preview when we switch channels or posts
     useEffect(() => {
         setShowPreview(false);

webapp/channels/src/components/common/comment_icon.tsx

@@ -41,16 +41,18 @@ const CommentIcon = ({
         iconStyle = `${iconStyle} ${searchStyle}`;
     }
 
+    const replyTitle = intl.formatMessage({
+        id: 'post_info.comment_icon.tooltip.reply',
+        defaultMessage: 'Reply',
+    });
+
     return (
         <WithTooltip
-            title={intl.formatMessage({
-                id: 'post_info.comment_icon.tooltip.reply',
-                defaultMessage: 'Reply',
-            })}
+            title={replyTitle}
         >
             <button
                 id={`${location}_commentIcon_${postId}`}
-                aria-label={intl.formatMessage({id: 'post_info.comment_icon.tooltip.reply', defaultMessage: 'Reply'}).toLowerCase()}
+                aria-label={replyTitle.toLowerCase()}
                 className={`${iconStyle} ${extraClass}`}
                 onClick={handleCommentClick}
             >

webapp/channels/src/components/post/post_component.tsx

@@ -379,14 +379,16 @@ const PostComponent = (props: Props): JSX.Element => {
         getHistory().push(`/${props.teamName}/pl/${post.id}`);
     }, [props.isMobileView, props.actions, props.teamName, post?.id]);
 
+    const {selectPostFromRightHandSideSearch} = props.actions;
+
     const handleCommentClick = useCallback((e: React.MouseEvent) => {
         e.preventDefault();
 
         if (!post) {
             return;
         }
-        props.actions.selectPostFromRightHandSideSearch(post);
-    }, [post, props.actions, props.actions.selectPostFromRightHandSideSearch]);
+        selectPostFromRightHandSideSearch(post);
+    }, [post, selectPostFromRightHandSideSearch]);
 
     const handleThreadClick = useCallback((e: React.MouseEvent) => {
         if (props.currentTeam?.id === teamId) {

webapp/channels/src/components/post/post_options.tsx

@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import classnames from 'classnames';
-import React, {useEffect, useRef, useState} from 'react';
+import React, {useCallback, useEffect, useRef, useState} from 'react';
 import type {ReactNode} from 'react';
 import {FormattedMessage} from 'react-intl';
 
@@ -65,6 +65,11 @@ const PostOptions = (props: Props): JSX.Element => {
     const [showDotMenu, setShowDotMenu] = useState(false);
     const [showActionsMenu, setShowActionsMenu] = useState(false);
 
+    const toggleEmojiPicker = useCallback(() => {
+        setShowEmojiPicker(!showEmojiPicker);
+        props.handleDropdownOpened!(!showEmojiPicker);
+    }, [props.handleDropdownOpened, showEmojiPicker]);
+
     useEffect(() => {
         const locationToUse = props.location === 'RHS_COMMENT' ? Locations.RHS_ROOT : props.location;
         if (props.isLastPost &&
@@ -73,7 +78,8 @@ const PostOptions = (props: Props): JSX.Element => {
             toggleEmojiPicker();
             props.actions.emitShortcutReactToLastPostFrom(Locations.NO_WHERE);
         }
-    }, [props.isLastPost, props.shortcutReactToLastPostEmittedFrom]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [props.isLastPost, props.shortcutReactToLastPostEmittedFrom, props.location, props.isPostHeaderVisible]);
 
     const {
         channelIsArchived,
@@ -92,11 +98,6 @@ const PostOptions = (props: Props): JSX.Element => {
         props.removePost(props.post);
     }
 
-    const toggleEmojiPicker = () => {
-        setShowEmojiPicker(!showEmojiPicker);
-        props.handleDropdownOpened!(!showEmojiPicker);
-    };
-
     const handleDotMenuOpened = (open: boolean) => {
         setShowDotMenu(open);
         props.handleDropdownOpened!(open);

webapp/channels/src/components/rhs_thread/rhs_thread.tsx

@@ -35,7 +35,7 @@ const RhsThread = ({
             // if team-scoped and mismatched team, close rhs
             dispatch(closeRightHandSide());
         }
-    }, [currentTeam, channel]);
+    }, [currentTeam, channel, dispatch]);
 
     if (selected == null || !channel) {
         return (