From fedb5b9f63083ab7511d15be01a441f524868610 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Wed, 14 Apr 2021 20:12:10 -0600 Subject: [PATCH] Fix disabled state of the composer --- res/css/views/rooms/_BasicMessageComposer.scss | 2 +- src/components/views/rooms/BasicMessageComposer.tsx | 9 ++++++--- src/components/views/rooms/SendMessageComposer.js | 4 ++++ 3 files changed, 11 insertions(+), 4 deletions(-) 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: