diff --git a/src/components/Modal/Translate.vue b/src/components/Modal/Translate.vue
index d53e7df1f18..dbc4b0e5493 100644
--- a/src/components/Modal/Translate.vue
+++ b/src/components/Modal/Translate.vue
@@ -32,13 +32,14 @@
input-id="fromLanguage"
:placeholder="t('text', 'Select language')"
:options="fromLanguages"
- :disabled="disableFromLanguage"
+ :disabled="disableFromLanguageSelect"
:append-to-body="false" />
+ @input="autosize"
+ @focus="onInputFocus" />
@@ -50,7 +51,10 @@
:disabled="!fromLanguage"
:append-to-body="false" />
-
+
@@ -107,7 +111,7 @@ export default {
canDetect: loadState('text', 'translation_can_detect'),
loading: false,
error: null,
- disableFromLanguage: true,
+ disableFromLanguageSelect: true,
}
},
computed: {
@@ -186,6 +190,15 @@ export default {
async contentReplace() {
this.$emit('replace-content', this.result)
},
+ autosize() {
+ this.$refs.input.style.height = 'auto'
+ this.$refs.input.style.height = this.$refs.input.scrollHeight + 'px'
+ this.$refs.result.style.height = this.$refs.input.scrollHeight + 'px'
+ },
+ onInputFocus() {
+ this.disableFromLanguageSelect = false
+ this.autosize()
+ },
},
}
@@ -209,7 +222,10 @@ textarea {
display: block;
width: 100%;
margin-bottom: 12px;
-
+ height: auto;
+ resize: none;
+ box-sizing: border-box;
+ overflow: hidden;
}
.language-selector {