From a8cad55fda588a6bd11cedcb6018516a0c084038 Mon Sep 17 00:00:00 2001
From: Pavel Djundik <github@xpaw.me>
Date: Wed, 29 Aug 2018 10:34:21 +0300
Subject: [PATCH] Fix input to behave better on Android

---
 client/components/ChatInput.vue | 42 ++++++++++++++++++++-------------
 1 file changed, 26 insertions(+), 16 deletions(-)

diff --git a/client/components/ChatInput.vue b/client/components/ChatInput.vue
index 4ba5c58a..1cb5412d 100644
--- a/client/components/ChatInput.vue
+++ b/client/components/ChatInput.vue
@@ -8,10 +8,11 @@
 		<textarea
 			id="input"
 			ref="input"
-			v-model="channel.pendingMessage"
+			:value="channel.pendingMessage"
 			:placeholder="getInputPlaceholder(channel)"
 			:aria-label="getInputPlaceholder(channel)"
 			class="mousetrap"
+			@input="setPendingMessage"
 			@keypress.enter.exact.prevent="onSubmit" />
 		<span
 			id="submit-tooltip"
@@ -26,7 +27,6 @@
 </template>
 
 <script>
-const $ = require("jquery");
 const commands = require("../js/commands/index");
 const socket = require("../js/socket");
 const Mousetrap = require("mousetrap");
@@ -65,19 +65,7 @@ export default {
 	},
 	watch: {
 		"channel.pendingMessage"() {
-			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
-				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";
-			});
+			this.setInputSize();
 		},
 	},
 	mounted() {
@@ -114,6 +102,25 @@ export default {
 		require("../js/autocompletion").disable();
 	},
 	methods: {
+		setPendingMessage(e) {
+			this.channel.pendingMessage = e.target.value;
+			this.setInputSize();
+		},
+		setInputSize() {
+			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
+				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";
+			});
+		},
 		getInputPlaceholder(channel) {
 			if (channel.type === "channel" || channel.type === "query") {
 				return `Write to ${channel.name}`;
@@ -124,7 +131,8 @@ export default {
 		onSubmit() {
 			// Triggering click event opens the virtual keyboard on mobile
 			// This can only be called from another interactive event (e.g. button click)
-			$(this.$refs.input).trigger("click").trigger("focus");
+			this.$refs.input.click();
+			this.$refs.input.focus();
 
 			if (!this.$root.connected) {
 				return false;
@@ -138,6 +146,8 @@ export default {
 			}
 
 			this.channel.pendingMessage = "";
+			this.$refs.input.value = "";
+			this.setInputSize();
 
 			if (text[0] === "/") {
 				const args = text.substr(1).split(" ");