diff --git a/res/css/views/rooms/_BasicMessageComposer.scss b/res/css/views/rooms/_BasicMessageComposer.scss index 4f58c08617..e1ba468204 100644 --- a/res/css/views/rooms/_BasicMessageComposer.scss +++ b/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; } } diff --git a/src/components/views/rooms/BasicMessageComposer.tsx b/src/components/views/rooms/BasicMessageComposer.tsx index 9d9e3a1ba0..e83f066bd0 100644 --- a/src/components/views/rooms/BasicMessageComposer.tsx +++ b/src/components/views/rooms/BasicMessageComposer.tsx @@ -140,7 +140,12 @@ export default class BasicMessageEditor extends React.Component } 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 }); 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, }); diff --git a/src/components/views/rooms/SendMessageComposer.js b/src/components/views/rooms/SendMessageComposer.js index 75bc943146..0d3a174766 100644 --- a/src/components/views/rooms/SendMessageComposer.js +++ b/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: