Fix disabled state of the composer

res/css/views/rooms/_BasicMessageComposer.scss

@@ -68,8 +68,8 @@ limitations under the License.
         }
 
         &.mx_BasicMessageComposer_input_disabled {
+            // Ignore all user input to avoid accidentally triggering the composer
             pointer-events: none;
-            cursor: not-allowed;
         }
     }
 

src/components/views/rooms/BasicMessageComposer.tsx

@@ -140,7 +140,12 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
     }
 
     public componentDidUpdate(prevProps: IProps) {
-        if (this.props.placeholder !== prevProps.placeholder && this.props.placeholder) {
+        // We need to re-check the placeholder when the enabled state changes because it causes the
+        // placeholder element to remount, which gets rid of the `::before` class. Re-evaluating the
+        // placeholder means we get a proper `::before` with the placeholder.
+        const enabledChange = this.props.disabled !== prevProps.disabled;
+        const placeholderChanged = this.props.placeholder !== prevProps.placeholder;
+        if (this.props.placeholder && (placeholderChanged || enabledChange)) {
             const {isEmpty} = this.props.model;
             if (isEmpty) {
                 this.showPlaceholder();
@@ -670,8 +675,6 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
         });
         const classes = classNames("mx_BasicMessageComposer_input", {
             "mx_BasicMessageComposer_input_shouldShowPillAvatar": this.state.showPillAvatar,
-
-            // TODO: @@ TravisR: This doesn't work properly. The composer resets in a strange way.
             "mx_BasicMessageComposer_input_disabled": this.props.disabled,
         });
 

src/components/views/rooms/SendMessageComposer.js

@@ -477,6 +477,10 @@ export default class SendMessageComposer extends React.Component {
     }
 
     onAction = (payload) => {
+        // don't let the user into the composer if it is disabled - all of these branches lead
+        // to the cursor being in the composer
+        if (this.props.disabled) return;
+
         switch (payload.action) {
             case 'reply_to_event':
             case Action.FocusComposer: