From 5d8a581201c585b7b57c239a1747d3fc1444397f Mon Sep 17 00:00:00 2001
From: Pavel Djundik <github@xpaw.me>
Date: Fri, 13 Jul 2018 16:12:56 +0300
Subject: [PATCH] Fix input not resizing back after sending a message

---
 client/components/ChatInput.vue | 24 +++++++++++-------------
 client/js/utils.js              |  5 -----
 2 files changed, 11 insertions(+), 18 deletions(-)

diff --git a/client/components/ChatInput.vue b/client/components/ChatInput.vue
index 0cf2c308..7aca7ef9 100644
--- a/client/components/ChatInput.vue
+++ b/client/components/ChatInput.vue
@@ -68,17 +68,19 @@ export default {
 	},
 	watch: {
 		"channel.pendingMessage"() {
-			const style = window.getComputedStyle(this.$refs.input);
-			const lineHeight = parseFloat(style.lineHeight, 10) || 1;
+			this.$nextTick(() => {
+				const style = window.getComputedStyle(this.$refs.input);
+				const lineHeight = parseFloat(style.lineHeight, 10) || 1;
 
-			// Start by resetting height before computing as scrollHeight does not
-			// decrease when deleting characters
-			resetInputHeight(this);
+				// Start by resetting height before computing as scrollHeight does not
+				// decrease when deleting characters
+				this.$refs.input.style.height = "";
 
-			// Use scrollHeight to calculate how many lines there are in input, and ceil the value
-			// because some browsers tend to incorrently round the values when using high density
-			// displays or using page zoom feature
-			this.$refs.input.style.height = Math.ceil(this.$refs.input.scrollHeight / lineHeight) * lineHeight + "px";
+				// Use scrollHeight to calculate how many lines there are in input, and ceil the value
+				// because some browsers tend to incorrently round the values when using high density
+				// displays or using page zoom feature
+				this.$refs.input.style.height = Math.ceil(this.$refs.input.scrollHeight / lineHeight) * lineHeight + "px";
+			});
 		},
 	},
 	mounted() {
@@ -122,9 +124,6 @@ export default {
 
 			return "";
 		},
-		resetInputHeight() {
-			this.$refs.input.style.height = "";
-		},
 		onSubmit() {
 			// Triggering click event opens the virtual keyboard on mobile
 			// This can only be called from another interactive event (e.g. button click)
@@ -138,7 +137,6 @@ export default {
 			}
 
 			this.channel.pendingMessage = "";
-			this.resetInputHeight();
 
 			if (text[0] === "/") {
 				const args = text.substr(1).split(" ");
diff --git a/client/js/utils.js b/client/js/utils.js
index 81502e6e..cbd50c05 100644
--- a/client/js/utils.js
+++ b/client/js/utils.js
@@ -19,7 +19,6 @@ module.exports = {
 	hasRoleInChannel,
 	move,
 	closeChan,
-	resetHeight,
 	toggleNotificationMarkers,
 	updateTitle,
 	togglePasswordField,
@@ -33,10 +32,6 @@ function findCurrentNetworkChan(name) {
 	return vueApp.activeChannel.network.channels.find((c) => c.name.toLowerCase() === name);
 }
 
-function resetHeight(element) {
-	element.style.height = element.style.minHeight;
-}
-
 // Given a channel element will determine if the lounge user or a given nick is one of the supplied roles.
 function hasRoleInChannel(channel, roles, nick) {
 	if (!channel || !roles) {