When showing thread, always auto-focus its composer (#8115)

Author: t3chguy

src/components/views/messages/MessageActionBar.tsx

@@ -24,7 +24,6 @@ import { MsgType, RelationType } from 'matrix-js-sdk/src/@types/event';
 import type { Relations } from 'matrix-js-sdk/src/models/relations';
 import { _t } from '../../../languageHandler';
 import dis from '../../../dispatcher/dispatcher';
-import { Action } from '../../../dispatcher/actions';
 import ContextMenu, { aboveLeftOf, ContextMenuTooltipButton, useContextMenu } from '../../structures/ContextMenu';
 import { isContentActionable, canEditContent, editEvent } from '../../../utils/EventUtils';
 import RoomContext, { TimelineRenderingType } from "../../../contexts/RoomContext";
@@ -225,10 +224,6 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
 
     private onThreadClick = (isCard: boolean): void => {
         showThread({ rootEvent: this.props.mxEvent, push: isCard });
-        dis.dispatch({
-            action: Action.FocusSendMessageComposer,
-            context: TimelineRenderingType.Thread,
-        });
     };
 
     private onEditClick = (): void => {

src/components/views/rooms/EditMessageComposer.tsx

@@ -202,23 +202,27 @@ class EditMessageComposer extends React.Component<IEditMessageComposerProps, ISt
                         timelineRenderingType: this.context.timelineRenderingType,
                     });
                 } else {
-                    this.clearStoredEditorState();
-                    dis.dispatch({
-                        action: Action.EditEvent,
-                        event: null,
-                        timelineRenderingType: this.context.timelineRenderingType,
-                    });
-                    dis.dispatch({
-                        action: Action.FocusSendMessageComposer,
-                        context: this.context.timelineRenderingType,
-                    });
+                    this.cancelEdit();
                 }
                 event.preventDefault();
                 break;
             }
         }
     };
 
+    private endEdit(): void {
+        // close the event editing and focus composer
+        dis.dispatch({
+            action: Action.EditEvent,
+            event: null,
+            timelineRenderingType: this.context.timelineRenderingType,
+        });
+        dis.dispatch({
+            action: Action.FocusSendMessageComposer,
+            context: this.context.timelineRenderingType,
+        });
+    }
+
     private get editorRoomKey(): string {
         return `mx_edit_room_${this.getRoom().roomId}_${this.context.timelineRenderingType}`;
     }
@@ -236,15 +240,7 @@ class EditMessageComposer extends React.Component<IEditMessageComposerProps, ISt
 
     private cancelEdit = (): void => {
         this.clearStoredEditorState();
-        dis.dispatch({
-            action: Action.EditEvent,
-            event: null,
-            timelineRenderingType: this.context.timelineRenderingType,
-        });
-        dis.dispatch({
-            action: Action.FocusSendMessageComposer,
-            context: this.context.timelineRenderingType,
-        });
+        this.endEdit();
     };
 
     private get shouldSaveStoredEditorState(): boolean {
@@ -357,16 +353,7 @@ class EditMessageComposer extends React.Component<IEditMessageComposerProps, ISt
             }
         }
 
-        // close the event editing and focus composer
-        dis.dispatch({
-            action: Action.EditEvent,
-            event: null,
-            timelineRenderingType: this.context.timelineRenderingType,
-        });
-        dis.dispatch({
-            action: Action.FocusSendMessageComposer,
-            context: this.context.timelineRenderingType,
-        });
+        this.endEdit();
     };
 
     private cancelPreviousPendingEdit(): void {

src/dispatcher/dispatch-actions/threads.ts

@@ -13,10 +13,14 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
+
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 
 import RightPanelStore from "../../stores/right-panel/RightPanelStore";
 import { RightPanelPhases } from "../../stores/right-panel/RightPanelStorePhases";
+import dis from "../dispatcher";
+import { Action } from "../actions";
+import { TimelineRenderingType } from "../../contexts/RoomContext";
 
 export const showThread = (props: {
     rootEvent: MatrixEvent;
@@ -41,6 +45,12 @@ export const showThread = (props: {
             threadViewCard,
         ]);
     }
+
+    // Focus the composer
+    dis.dispatch({
+        action: Action.FocusSendMessageComposer,
+        context: TimelineRenderingType.Thread,
+    });
 };
 
 export const showThreadPanel = () => {