Fix input not resizing back after sending a message
This commit is contained in:
parent
8133805dec
commit
5d8a581201
@ -68,17 +68,19 @@ export default {
|
|||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
"channel.pendingMessage"() {
|
"channel.pendingMessage"() {
|
||||||
|
this.$nextTick(() => {
|
||||||
const style = window.getComputedStyle(this.$refs.input);
|
const style = window.getComputedStyle(this.$refs.input);
|
||||||
const lineHeight = parseFloat(style.lineHeight, 10) || 1;
|
const lineHeight = parseFloat(style.lineHeight, 10) || 1;
|
||||||
|
|
||||||
// Start by resetting height before computing as scrollHeight does not
|
// Start by resetting height before computing as scrollHeight does not
|
||||||
// decrease when deleting characters
|
// decrease when deleting characters
|
||||||
resetInputHeight(this);
|
this.$refs.input.style.height = "";
|
||||||
|
|
||||||
// Use scrollHeight to calculate how many lines there are in input, and ceil the value
|
// 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
|
// because some browsers tend to incorrently round the values when using high density
|
||||||
// displays or using page zoom feature
|
// displays or using page zoom feature
|
||||||
this.$refs.input.style.height = Math.ceil(this.$refs.input.scrollHeight / lineHeight) * lineHeight + "px";
|
this.$refs.input.style.height = Math.ceil(this.$refs.input.scrollHeight / lineHeight) * lineHeight + "px";
|
||||||
|
});
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
@ -122,9 +124,6 @@ export default {
|
|||||||
|
|
||||||
return "";
|
return "";
|
||||||
},
|
},
|
||||||
resetInputHeight() {
|
|
||||||
this.$refs.input.style.height = "";
|
|
||||||
},
|
|
||||||
onSubmit() {
|
onSubmit() {
|
||||||
// Triggering click event opens the virtual keyboard on mobile
|
// Triggering click event opens the virtual keyboard on mobile
|
||||||
// This can only be called from another interactive event (e.g. button click)
|
// This can only be called from another interactive event (e.g. button click)
|
||||||
@ -138,7 +137,6 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
this.channel.pendingMessage = "";
|
this.channel.pendingMessage = "";
|
||||||
this.resetInputHeight();
|
|
||||||
|
|
||||||
if (text[0] === "/") {
|
if (text[0] === "/") {
|
||||||
const args = text.substr(1).split(" ");
|
const args = text.substr(1).split(" ");
|
||||||
|
@ -19,7 +19,6 @@ module.exports = {
|
|||||||
hasRoleInChannel,
|
hasRoleInChannel,
|
||||||
move,
|
move,
|
||||||
closeChan,
|
closeChan,
|
||||||
resetHeight,
|
|
||||||
toggleNotificationMarkers,
|
toggleNotificationMarkers,
|
||||||
updateTitle,
|
updateTitle,
|
||||||
togglePasswordField,
|
togglePasswordField,
|
||||||
@ -33,10 +32,6 @@ function findCurrentNetworkChan(name) {
|
|||||||
return vueApp.activeChannel.network.channels.find((c) => c.name.toLowerCase() === 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.
|
// 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) {
|
function hasRoleInChannel(channel, roles, nick) {
|
||||||
if (!channel || !roles) {
|
if (!channel || !roles) {
|
||||||
|
Loading…
Reference in New Issue
Block a user