message box

packages/rocketchat-lib/client/MessageAction.js

@@ -133,15 +133,15 @@ Meteor.startup(function() {
 		icon: 'icon-pencil',
 		i18nLabel: 'Edit',
 		context: ['message', 'message-mobile'],
-		action(e, instance) {
+		action(e) {
 			const message = $(e.currentTarget).closest('.message')[0];
 			chatMessages[Session.get('openedRoom')].edit(message);
 			RocketChat.MessageAction.hideDropDown();
-			const input = instance.find('.input-message');
-			Meteor.setTimeout(() => {
-				input.focus();
-				input.updateAutogrow();
-			}, 200);
+			// const input = instance.find('.input-message');
+			// Meteor.setTimeout(() => {
+			// 	input.focus();
+			// 	input.change();
+			// }, 200);
 		},
 		validation(message) {
 			if (RocketChat.models.Subscriptions.findOne({

packages/rocketchat-livechat/app/client/views/messages.js

@@ -177,6 +177,7 @@ Template.messages.onRendered(function() {
 			template.atBottom = messages.scrollTop >= messages.scrollHeight - messages.clientHeight;
 		}, 200);
 		Meteor.setInterval(function() {
+
 			if (template.atBottom) {
 				messages.scrollTop = messages.scrollHeight - messages.clientHeight;
 				newMessage.className = 'new-message not';

packages/rocketchat-theme/client/imports/general/base_old.css

@@ -396,7 +396,7 @@
 	box-shadow: 0 0 0;
 }
 
-.rc-old textarea,
+/*.rc-old textarea,*/
 .rc-old select,
 .rc-old input[type='text'],
 .rc-old input[type='number'],
@@ -2022,7 +2022,7 @@
 	z-index: 1;
 
 	&-wrapper {
-		height: 100%;
+		height: calc(100% - 61px);
 		display: flex;
 	}
 
@@ -2030,6 +2030,8 @@
 		flex: 1 1 auto;
 		width: 50%;
 		position: relative;
+		display: flex;
+		flex-direction: column;
 	}
 
 	& .room-topic {
@@ -2055,16 +2057,6 @@
 		-webkit-overflow-scrolling: touch;
 	}
 
-	& .footer {
-		padding: 8px 20px 0;
-		border-width: 1px 0 0;
-		z-index: 100;
-		bottom: 0;
-		left: 0;
-		width: 100%;
-		min-height: var(--footer-min-height);
-	}
-
 	& .message-form {
 		margin-bottom: 18px;
 
@@ -2417,7 +2409,7 @@
 	position: relative;
 	overflow: hidden;
 	width: 100%;
-	height: calc(100% - 130px);
+	flex: 1 1 100%;
 
 	& .message-cog-container .message-action.jump-to-search-message {
 		display: none !important;

packages/rocketchat-ui-message/client/messageBox.html

@@ -21,8 +21,7 @@
 				</div>
 			{{/with}}
 			<div class="rc-message-box__container">
-
-				<div class="rc-message-box__icon">
+				<div class="rc-message-box__icon emoji-picker-icon">
 					<svg class="rc-input__icon-svg rc-input__icon-svg--smile">
 						<use href="#icon-smile"></use>
 					</svg>

packages/rocketchat-ui-message/client/messageBox.js

@@ -411,6 +411,8 @@ Template.messageBox.onRendered(function() {
 	this.$('.js-input-message').autogrow({
 		animate: true,
 		onInitialize: true
+	}).on('autogrow', () => {
+		this.data && this.data.onResize && this.data.onResize();
 	});
 });
 

packages/rocketchat-ui/client/lib/chatMessages.js

@@ -136,15 +136,17 @@ this.ChatMessages = class ChatMessages {
 		this.input.classList.add('editing');
 		this.$input.closest('.message-form').addClass('editing');
 
-		this.input.focus();
 		if (message.attachments && message.attachments[0].description) {
 			this.input.value = message.attachments[0].description;
 		} else {
 			this.input.value = msg;
 		}
+		$(this.input).change();
 
 		const cursor_pos = editingNext ? 0 : -1;
-		return this.$input.setCursorPosition(cursor_pos);
+		this.$input.setCursorPosition(cursor_pos);
+		this.input.focus();
+		return this.input;
 	}
 
 	clearEditing() {

packages/rocketchat-ui/client/lib/textarea-autogrow.js

@@ -60,6 +60,7 @@
 				}
 
 				$self.height(newHeight);
+				$self.trigger('autogrow', []);
 
 				if (settings.postGrowCallback !== null) {
 					settings.postGrowCallback($self);

packages/rocketchat-ui/client/views/app/room.html

@@ -28,7 +28,7 @@
 							<span class="room-topic">{{{RocketChatMarkdown roomTopic}}}</span>
 						</h2>
 					</header>
-					
+
 				{{/unless}}
 				<div class="messages-container-wrapper">
 					<div class="messages-container-main">
@@ -127,7 +127,7 @@
 							</div>
 						</div>
 						<footer class="footer border-component-color">
-							{{> messageBox}}
+							{{> messageBox messageboxData}}
 						</footer>
 					</div>
 					{{#with flexData}}

packages/rocketchat-ui/client/views/app/room.js

@@ -127,7 +127,15 @@ Template.room.helpers({
 		});
 		return (roomData.announcement !== undefined) && (roomData.announcement !== '');
 	},
-
+	messageboxData() {
+		const instance = Template.instance();
+		return {
+			_id: this._id,
+			onResize: () => {
+				instance.sendToBottomIfNecessary();
+			}
+		};
+	},
 	roomAnnouncement() {
 		const roomData = Session.get(`roomData${ this._id }`);
 		if (!roomData) { return ''; }
@@ -741,6 +749,7 @@ Template.room.onRendered(function() {
 	};
 
 	template.sendToBottomIfNecessary = function() {
+
 		if ((template.atBottom === true) && (template.isAtBottom() !== true)) {
 			return template.sendToBottom();
 		}