From db64de825816a9ea22312c55f3434a575a10c7fc Mon Sep 17 00:00:00 2001
From: KDSBrowne <kert.browne85@gmail.com>
Date: Thu, 3 Jan 2019 15:41:20 +0000
Subject: [PATCH] remove chat input auto-focus on mobile only
---
.../chat/message-form/component.jsx | 21 +++++++++++++++++++
1 file changed, 21 insertions(+)
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 b3eb989e95..37a840db03 100755
--- a/bigbluebutton-html5/imports/ui/components/chat/message-form/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/chat/message-form/component.jsx
@@ -2,6 +2,7 @@ import React, { PureComponent } from 'react';
import { defineMessages, injectIntl } from 'react-intl';
import cx from 'classnames';
import TextareaAutosize from 'react-autosize-textarea';
+import browser from 'browser-detect';
import { styles } from './styles';
import Button from '../../button/component';
@@ -42,11 +43,30 @@ class MessageForm extends PureComponent {
hasErrors: false,
};
+ this.BROWSER_RESULTS = browser();
+
this.handleMessageChange = this.handleMessageChange.bind(this);
this.handleMessageKeyDown = this.handleMessageKeyDown.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
+ componentDidMount() {
+ const { mobile } = this.BROWSER_RESULTS;
+
+ if (!mobile) {
+ this.textarea.focus();
+ }
+ }
+
+ componentDidUpdate(prevProps) {
+ const { chatName } = this.props;
+ const { mobile } = this.BROWSER_RESULTS;
+
+ if (prevProps.chatName !== chatName && !mobile) {
+ this.textarea.focus();
+ }
+ }
+
handleMessageKeyDown(e) {
// TODO Prevent send message pressing enter on mobile and/or virtual keyboard
if (e.keyCode === 13 && !e.shiftKey) {
@@ -136,6 +156,7 @@ class MessageForm extends PureComponent {
<TextareaAutosize
className={styles.input}
id="message-input"
+ innerRef={(ref) => { this.textarea = ref; return this.textarea; }}
placeholder={intl.formatMessage(messages.inputPlaceholder, { 0: chatName })}
aria-controls={chatAreaId}
aria-label={intl.formatMessage(messages.inputLabel, { 0: chatTitle })}
--
GitLab