diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/emoji_input/emoji_input.js | 4 | ||||
| -rw-r--r-- | src/components/post_status_form/post_status_form.js | 21 | ||||
| -rw-r--r-- | src/components/post_status_form/post_status_form.vue | 8 |
3 files changed, 26 insertions, 7 deletions
diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js index 5f90d7f4..25c21403 100644 --- a/src/components/emoji_input/emoji_input.js +++ b/src/components/emoji_input/emoji_input.js @@ -211,10 +211,12 @@ const EmojiInput = { this.keepOpen = keepOpen this.$emit('input', newValue) const position = this.caret + (insertion + spaceAfter + spaceBefore).length + if (!keepOpen) { + this.input.elm.focus() + } this.$nextTick(function () { // Re-focus inputbox after clicking suggestion - this.input.elm.focus() // Set selection right after the replacement instead of the very end this.input.elm.setSelectionRange(position, position) this.caret = position diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js index d468be76..60cb5a9a 100644 --- a/src/components/post_status_form/post_status_form.js +++ b/src/components/post_status_form/post_status_form.js @@ -249,6 +249,7 @@ const PostStatusForm = { return fileTypeService.fileType(fileInfo.mimetype) }, paste (e) { + this.resize() if (e.clipboardData.files.length > 0) { // prevent pasting of file as text e.preventDefault() @@ -267,6 +268,11 @@ const PostStatusForm = { fileDrag (e) { e.dataTransfer.dropEffect = 'copy' }, + onEmojiInputInput (e) { + this.$nextTick(() => { + this.resize(this.$refs['textarea']) + }) + }, resize (e) { const target = e.target || e if (!(target instanceof window.Element)) { return } @@ -275,12 +281,25 @@ const PostStatusForm = { // Remove "px" at the end of the values const vertPadding = Number(topPaddingStr.substr(0, topPaddingStr.length - 2)) + Number(bottomPaddingStr.substr(0, bottomPaddingStr.length - 2)) + const oldValue = Number((/([0-9.]+)px/.exec(target.style.height || '') || [])[1]) // Auto is needed to make textbox shrink when removing lines target.style.height = 'auto' - target.style.height = `${target.scrollHeight - vertPadding}px` + const newValue = target.scrollHeight - vertPadding + target.style.height = `${newValue}px` + const scroller = this.$el.closest('.sidebar-scroller') || + this.$el.closest('.post-form-modal-view') || + window + const delta = newValue - oldValue || 0 if (target.value === '') { target.style.height = null + } else { + /* For some reason this doens't _exactly_ work on mobile post form when typing + * but it works when adding emojis. Supposedly, removing the "height = auto" + * line helps with that but it obviously breaks the autoheight. + */ + scroller.scrollBy(0, delta) } + this.$refs['emoji-input'].resize() }, showEmojiPicker () { this.$refs['textarea'].focus() diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue index b50607e6..99ffeef8 100644 --- a/src/components/post_status_form/post_status_form.vue +++ b/src/components/post_status_form/post_status_form.vue @@ -81,6 +81,7 @@ enable-emoji-picker hide-emoji-button enable-sticker-picker + @input="onEmojiInputInput" @sticker-uploaded="addMediaFile" @sticker-upload-failed="uploadFailed" > @@ -95,7 +96,8 @@ @keyup.ctrl.enter="postStatus(newStatus)" @drop="fileDrop" @dragover.prevent="fileDrag" - @input="resize" + @keydown.exact="resize" + @compositionupdate="resize" @paste="paste" /> <p @@ -475,10 +477,6 @@ box-sizing: content-box; } - .form-post-body:focus { - min-height: 48px; - } - .main-input { position: relative; } |