allow message input textarea height to grow with more text

tinode · Mar 14, 2023 · 5ae58fb · 5ae58fb
1 parent 43798ea
commit 5ae58fb
Show file tree

Hide file tree

Showing 7 changed files with 20 additions and 7 deletions.
diff --git a/css/base.css b/css/base.css
@@ -197,7 +197,7 @@ textarea {
   height: 2.5rem;
   border-bottom: 1px solid #ccc;
   box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
-  transition: all 0.1s ease-in-out;
+  transition: all 0.1s ease-in-out, height 0s;
 }
 
 input[type="text"],
@@ -1508,6 +1508,13 @@ img.channel {
   color: #2196f3!important;
 }
 
+/* The textarea where the message is entered. */
+#send-message-input {
+  overflow: hidden auto;
+  min-height: 2.5rem;
+  max-height: 6rem;
+}
+
 /* New chat invitation panel */
 
 .accept-invite-panel {

diff --git a/css/base.min.css b/css/base.min.css
diff --git a/src/widgets/send-message.jsx b/src/widgets/send-message.jsx
@@ -111,6 +111,10 @@ class SendMessage extends React.PureComponent {
         // Set focus on desktop, but not on mobile: focus causes soft keyboard to pop up.
         this.messageEditArea.focus();
       }
+
+      // Adjust height of the message area for the amount of text.
+      this.messageEditArea.style.height = '0px';
+      this.messageEditArea.style.height = this.messageEditArea.scrollHeight + 'px';
     }
 
     if (prevProps.topicName != this.props.topicName) {
@@ -276,7 +280,7 @@ class SendMessage extends React.PureComponent {
                   </Suspense>) :
                   <textarea id="send-message-input" placeholder={prompt}
                     value={this.state.message} onChange={this.handleMessageTyping}
-                    onKeyPress={this.handleKeyPress}
+                    onKeyDown={this.handleKeyPress}
                     ref={ref => {this.messageEditArea = ref;}} />)}
               {this.state.message || !audioEnabled ?
                 <a href="#" onClick={this.handleSend} title={formatMessage(messages.icon_title_send)}>

diff --git a/umd/index.dev.js b/umd/index.dev.js
@@ -14981,6 +14981,8 @@ class SendMessage extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureComp
       if (window.getComputedStyle(this.messageEditArea).getPropertyValue('transition-property') == 'all') {
         this.messageEditArea.focus();
       }
+      this.messageEditArea.style.height = '0px';
+      this.messageEditArea.style.height = this.messageEditArea.scrollHeight + 'px';
     }
     if (prevProps.topicName != this.props.topicName) {
       this.setState({
@@ -15151,7 +15153,7 @@ class SendMessage extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureComp
       placeholder: prompt,
       value: this.state.message,
       onChange: this.handleMessageTyping,
-      onKeyPress: this.handleKeyPress,
+      onKeyDown: this.handleKeyPress,
       ref: ref => {
         this.messageEditArea = ref;
       }

diff --git a/umd/index.dev.js.map b/umd/index.dev.js.map
diff --git a/umd/index.prod.js b/umd/index.prod.js
diff --git a/umd/index.prod.js.map b/umd/index.prod.js.map