From ec15ad9aa64c3bd6f2fe566e7a546813d6b3987d Mon Sep 17 00:00:00 2001
From: KDSBrowne <kert.browne85@gmail.com>
Date: Fri, 28 Dec 2018 21:48:59 +0000
Subject: [PATCH] remove default focus state on chat input field
---
.../chat/message-form/component.jsx | 40 ++++++++-----------
1 file changed, 16 insertions(+), 24 deletions(-)
diff --git a/bigbluebutton-html5/imports/ui/components/chat/message-form/component.jsx b/bigbluebutton-html5/imports/ui/components/chat/message-form/component.jsx
index 85d0c213b7..b3eb989e95 100755
--- a/bigbluebutton-html5/imports/ui/components/chat/message-form/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/chat/message-form/component.jsx
@@ -47,16 +47,6 @@ class MessageForm extends PureComponent {
this.handleSubmit = this.handleSubmit.bind(this);
}
- componentDidMount() {
- this.textarea.focus();
- }
-
- componentDidUpdate(prevProps) {
- if (prevProps.chatName !== this.props.chatName) {
- this.textarea.focus();
- }
- }
-
handleMessageKeyDown(e) {
// TODO Prevent send message pressing enter on mobile and/or virtual keyboard
if (e.keyCode === 13 && !e.shiftKey) {
@@ -102,13 +92,16 @@ class MessageForm extends PureComponent {
handleSubmit(e) {
e.preventDefault();
- const { disabled, minMessageLength, maxMessageLength } = this.props;
- let message = this.state.message.trim();
+ const {
+ disabled, minMessageLength, maxMessageLength, handleSendMessage,
+ } = this.props;
+ const { message } = this.state;
+ let msg = message.trim();
if (disabled
- || message.length === 0
- || message.length < minMessageLength
- || message.length > maxMessageLength) {
+ || msg.length === 0
+ || msg.length < minMessageLength
+ || msg.length > maxMessageLength) {
this.setState({ hasErrors: true });
return false;
}
@@ -116,10 +109,10 @@ class MessageForm extends PureComponent {
// Sanitize. See: http://shebang.brandonmintern.com/foolproof-html-escaping-in-javascript/
const div = document.createElement('div');
- div.appendChild(document.createTextNode(message));
- message = div.innerHTML;
+ div.appendChild(document.createTextNode(msg));
+ msg = div.innerHTML;
- return this.props.handleSendMessage(message)
+ return handleSendMessage(msg)
.then(() => this.setState({
message: '',
hasErrors: false,
@@ -128,24 +121,23 @@ class MessageForm extends PureComponent {
render() {
const {
- intl, chatTitle, chatName, disabled,
+ intl, chatTitle, chatName, disabled, className, chatAreaId,
} = this.props;
- const { hasErrors, error } = this.state;
+ const { hasErrors, error, message } = this.state;
return (
<form
ref={(ref) => { this.form = ref; }}
- className={cx(this.props.className, styles.form)}
+ className={cx(className, styles.form)}
onSubmit={this.handleSubmit}
>
<div className={styles.wrapper}>
<TextareaAutosize
className={styles.input}
id="message-input"
- innerRef={ref => (this.textarea = ref)}
placeholder={intl.formatMessage(messages.inputPlaceholder, { 0: chatName })}
- aria-controls={this.props.chatAreaId}
+ aria-controls={chatAreaId}
aria-label={intl.formatMessage(messages.inputLabel, { 0: chatTitle })}
aria-invalid={hasErrors ? 'true' : 'false'}
aria-describedby={hasErrors ? 'message-input-error' : null}
@@ -153,7 +145,7 @@ class MessageForm extends PureComponent {
autoComplete="off"
spellCheck="true"
disabled={disabled}
- value={this.state.message}
+ value={message}
onChange={this.handleMessageChange}
onKeyDown={this.handleMessageKeyDown}
/>
--
GitLab