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) {