Add a focus_composer dispatcher action

and use it

src/ContentMessages.tsx

@@ -31,6 +31,7 @@ import Spinner from "./components/views/elements/Spinner";
 
 // Polyfill for Canvas.toBlob API using Canvas.toDataURL
 import "blueimp-canvas-to-blob";
+import { Action } from "./dispatcher/actions";
 
 const MAX_WIDTH = 800;
 const MAX_HEIGHT = 600;
@@ -529,7 +530,7 @@ export default class ContentMessages {
         dis.dispatch({action: 'upload_started'});
 
         // Focus the composer view
-        dis.dispatch({action: 'focus_composer'});
+        dis.fire(Action.FocusComposer);
 
         function onProgress(ev) {
             upload.total = ev.total;

src/components/structures/LeftPanel.js

@@ -27,6 +27,7 @@ import SettingsStore from '../../settings/SettingsStore';
 import {_t} from "../../languageHandler";
 import Analytics from "../../Analytics";
 import RoomList2 from "../views/rooms/RoomList2";
+import {Action} from "../../dispatcher/actions";
 
 
 const LeftPanel = createReactClass({
@@ -198,7 +199,7 @@ const LeftPanel = createReactClass({
 
     onSearchCleared: function(source) {
         if (source === "keyboard") {
-            dis.dispatch({action: 'focus_composer'});
+            dis.fire(Action.FocusComposer);
         }
         this.setState({searchExpanded: false});
     },

src/components/structures/LoggedInView.tsx

@@ -51,6 +51,7 @@ import {
     showToast as showServerLimitToast,
     hideToast as hideServerLimitToast
 } from "../../toasts/ServerLimitToast";
+import { Action } from "../../dispatcher/actions";
 
 // We need to fetch each pinned message individually (if we don't already have it)
 // so each pinned message may trigger a request. Limit the number per room for sanity.
@@ -346,7 +347,7 @@ class LoggedInView extends React.PureComponent<IProps, IState> {
             // refocusing during a paste event will make the
             // paste end up in the newly focused element,
             // so dispatch synchronously before paste happens
-            dis.dispatch({action: 'focus_composer'}, true);
+            dis.fire(Action.FocusComposer, true);
         }
     };
 
@@ -496,7 +497,7 @@ class LoggedInView extends React.PureComponent<IProps, IState> {
 
             if (!isClickShortcut && ev.key !== Key.TAB && !canElementReceiveInput(ev.target)) {
                 // synchronous dispatch so we focus before key generates input
-                dis.dispatch({action: 'focus_composer'}, true);
+                dis.fire(Action.FocusComposer, true);
                 ev.stopPropagation();
                 // we should *not* preventDefault() here as
                 // that would prevent typing in the now-focussed composer

src/components/structures/MatrixChat.tsx

@@ -347,7 +347,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
             Analytics.trackPageChange(durationMs);
         }
         if (this.focusComposer) {
-            dis.dispatch({action: 'focus_composer'});
+            dis.fire(Action.FocusComposer);
             this.focusComposer = false;
         }
     }
@@ -1363,7 +1363,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                 showNotificationsToast();
             }
 
-            dis.dispatch({action: 'focus_composer'});
+            dis.fire(Action.FocusComposer);
             this.setState({
                 ready: true,
             });

src/components/structures/RoomStatusBar.js

@@ -27,6 +27,7 @@ import Resend from '../../Resend';
 import * as cryptodevices from '../../cryptodevices';
 import dis from '../../dispatcher/dispatcher';
 import {messageForResourceLimitError, messageForSendError} from '../../utils/ErrorUtils';
+import {Action} from "../../dispatcher/actions";
 
 const STATUS_BAR_HIDDEN = 0;
 const STATUS_BAR_EXPANDED = 1;
@@ -135,12 +136,12 @@ export default createReactClass({
 
     _onResendAllClick: function() {
         Resend.resendUnsentEvents(this.props.room);
-        dis.dispatch({action: 'focus_composer'});
+        dis.fire(Action.FocusComposer);
     },
 
     _onCancelAllClick: function() {
         Resend.cancelUnsentEvents(this.props.room);
-        dis.dispatch({action: 'focus_composer'});
+        dis.fire(Action.FocusComposer);
     },
 
     _onShowDevicesClick: function() {

src/components/structures/RoomView.js

@@ -55,6 +55,7 @@ import {haveTileForEvent} from "../views/rooms/EventTile";
 import RoomContext from "../../contexts/RoomContext";
 import MatrixClientContext from "../../contexts/MatrixClientContext";
 import { shieldStatusForRoom } from '../../utils/ShieldUtils';
+import {Action} from "../../dispatcher/actions";
 
 const DEBUG = false;
 let debuglog = function() {};
@@ -1171,7 +1172,7 @@ export default createReactClass({
             ev.dataTransfer.files, this.state.room.roomId, this.context,
         );
         this.setState({ draggingFile: false });
-        dis.dispatch({action: 'focus_composer'});
+        dis.fire(Action.FocusComposer);
     },
 
     onDragLeaveOrEnd: function(ev) {
@@ -1377,7 +1378,7 @@ export default createReactClass({
                 event: null,
             });
         }
-        dis.dispatch({action: 'focus_composer'});
+        dis.fire(Action.FocusComposer);
     },
 
     onLeaveClick: function() {
@@ -1488,7 +1489,7 @@ export default createReactClass({
     // jump down to the bottom of this room, where new events are arriving
     jumpToLiveTimeline: function() {
         this._messagePanel.jumpToLiveTimeline();
-        dis.dispatch({action: 'focus_composer'});
+        dis.fire(Action.FocusComposer);
     },
 
     // jump up to wherever our read marker is

src/components/views/elements/ReplyThread.js

@@ -26,6 +26,7 @@ import {makeUserPermalink, RoomPermalinkCreator} from "../../../utils/permalinks
 import SettingsStore from "../../../settings/SettingsStore";
 import escapeHtml from "escape-html";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import {Action} from "../../../dispatcher/actions";
 
 // This component does no cycle detection, simply because the only way to make such a cycle would be to
 // craft event_id's, using a homeserver that generates predictable event IDs; even then the impact would
@@ -290,7 +291,7 @@ export default class ReplyThread extends React.Component {
             events,
         }, this.loadNextEvent);
 
-        dis.dispatch({action: 'focus_composer'});
+        dis.fire(Action.FocusComposer);
     }
 
     render() {

src/components/views/rooms/EditMessageComposer.js

@@ -31,6 +31,7 @@ import {EventStatus} from 'matrix-js-sdk';
 import BasicMessageComposer from "./BasicMessageComposer";
 import {Key} from "../../../Keyboard";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import {Action} from "../../../dispatcher/actions";
 
 function _isReply(mxEvent) {
     const relatesTo = mxEvent.getContent()["m.relates_to"];
@@ -157,7 +158,7 @@ export default class EditMessageComposer extends React.Component {
                 dis.dispatch({action: 'edit_event', event: nextEvent});
             } else {
                 dis.dispatch({action: 'edit_event', event: null});
-                dis.dispatch({action: 'focus_composer'});
+                dis.fire(Action.FocusComposer);
             }
             event.preventDefault();
         }
@@ -165,7 +166,7 @@ export default class EditMessageComposer extends React.Component {
 
     _cancelEdit = () => {
         dis.dispatch({action: "edit_event", event: null});
-        dis.dispatch({action: 'focus_composer'});
+        dis.fire(Action.FocusComposer);
     }
 
     _isContentModified(newContent) {
@@ -195,7 +196,7 @@ export default class EditMessageComposer extends React.Component {
 
         // close the event editing and focus composer
         dis.dispatch({action: "edit_event", event: null});
-        dis.dispatch({action: 'focus_composer'});
+        dis.fire(Action.FocusComposer);
     };
 
     _cancelPreviousPendingEdit() {

src/components/views/rooms/SendMessageComposer.js

@@ -44,6 +44,7 @@ import {Key} from "../../../Keyboard";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
 import RateLimitedFunc from '../../../ratelimitedfunc';
+import {Action} from "../../../dispatcher/actions";
 
 function addReplyToMessageContent(content, repliedToEvent, permalinkCreator) {
     const replyContent = ReplyThread.makeReplyMixIn(repliedToEvent);
@@ -364,7 +365,7 @@ export default class SendMessageComposer extends React.Component {
     onAction = (payload) => {
         switch (payload.action) {
             case 'reply_to_event':
-            case 'focus_composer':
+            case Action.FocusComposer:
                 this._editorRef && this._editorRef.focus();
                 break;
             case 'insert_mention':

src/cryptodevices.js

@@ -19,6 +19,7 @@ import * as sdk from './index';
 import dis from './dispatcher/dispatcher';
 import Modal from './Modal';
 import { _t } from './languageHandler';
+import {Action} from "./dispatcher/actions";
 
 /**
  * Mark all given devices as 'known'
@@ -66,7 +67,7 @@ export async function getUnknownDevicesForRoom(matrixClient, room) {
 }
 
 function focusComposer() {
-    dis.dispatch({action: 'focus_composer'});
+    dis.fire(Action.FocusComposer);
 }
 
 /**

src/dispatcher/actions.ts

@@ -53,4 +53,9 @@ export enum Action {
      * Provide status information for an ongoing update check. Should be used with a CheckUpdatesPayload.
      */
     CheckUpdates = "check_updates",
+
+    /**
+     * Focuses the user's cursor to the composer. No additional payload information required.
+     */
+    FocusComposer = "focus_composer",
 }