From 9926157683ff95ad89b04e4d6347b25296eb5995 Mon Sep 17 00:00:00 2001
From: Pavel Djundik <github@xpaw.me>
Date: Fri, 13 Jul 2018 13:24:05 +0300
Subject: [PATCH] Resize input when typing

---
 client/components/ChatInput.vue | 22 +++++++++++++++++++++-
 client/js/lounge.js             | 21 +--------------------
 2 files changed, 22 insertions(+), 21 deletions(-)

diff --git a/client/components/ChatInput.vue b/client/components/ChatInput.vue
index 69ccca0d..fe52bf70 100644
--- a/client/components/ChatInput.vue
+++ b/client/components/ChatInput.vue
@@ -66,6 +66,23 @@ export default {
 		network: Object,
 		channel: Object,
 	},
+	watch: {
+		"channel.pendingMessage": {
+			handler: function() {
+				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);
+
+				// 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() {
 		if (this.$root.settings.autocomplete) {
 			require("../js/autocompletion").enable(this.$refs.input);
@@ -107,6 +124,9 @@ 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)
@@ -120,7 +140,7 @@ export default {
 			}
 
 			this.channel.pendingMessage = "";
-			// resetInputHeight(input.get(0));
+			this.resetInputHeight();
 
 			if (text[0] === "/") {
 				const args = text.substr(1).split(" ");
diff --git a/client/js/lounge.js b/client/js/lounge.js
index 50c13350..55ff3183 100644
--- a/client/js/lounge.js
+++ b/client/js/lounge.js
@@ -75,25 +75,6 @@ window.vueMounted = () => {
 		return contextMenuFactory.createContextMenu($(this), e).show();
 	});
 
-	function resetInputHeight(input) {
-		input.style.height = "";
-	}
-
-	const input = $("#input")
-		.on("input", function() {
-			const style = window.getComputedStyle(this);
-			const lineHeight = parseFloat(style.lineHeight, 10) || 1;
-
-			// Start by resetting height before computing as scrollHeight does not
-			// decrease when deleting characters
-			resetInputHeight(this);
-
-			// 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.style.height = Math.ceil(this.scrollHeight / lineHeight) * lineHeight + "px";
-		});
-
 	if (navigator.platform.match(/(Mac|iPhone|iPod|iPad)/i)) {
 		$(document.body).addClass("is-apple");
 	}
@@ -194,7 +175,7 @@ window.vueMounted = () => {
 			// On touch devices unfocus (blur) the input to correctly close the virtual keyboard
 			// An explicit blur is required, as the keyboard may open back up if the focus remains
 			// See https://github.com/thelounge/thelounge/issues/2257
-			input.trigger("ontouchstart" in window ? "blur" : "focus");
+			$("#input").trigger("ontouchstart" in window ? "blur" : "focus");
 		}
 
 		if (channel && channel.channel.usersOutdated) {