moon
/
pleroma-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'fix_textfields' into 'develop' 

Fix textarea not resizing correctly and probably cursor position

Closes #230

See merge request pleroma/pleroma-fe!430
This commit is contained in:
HJ 2018-12-25 01:29:18 +00:00
parent e59b67e119 18d7684f32
commit 698328dfbe
1 changed files with 13 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/post_status_form/post_status_form.js
View File

@ -32,6 +32,8 @@ const PostStatusForm = {
}, },
mounted () { mounted () {
this.resize(this.$refs.textarea) this.resize(this.$refs.textarea)
const textLength = this.$refs.textarea.value.length
this.$refs.textarea.setSelectionRange(textLength, textLength)
if (this.replyTo) { if (this.replyTo) {
this.$refs.textarea.focus() this.$refs.textarea.focus()
@ -250,7 +252,8 @@ const PostStatusForm = {
} }
this.$emit('posted') this.$emit('posted')
let el = this.$el.querySelector('textarea') let el = this.$el.querySelector('textarea')
el.style.height = '16px' el.style.height = 'auto'
el.style.height = undefined
this.error = null this.error = null
} else { } else {
this.error = data.error this.error = data.error
@ -298,13 +301,15 @@ const PostStatusForm = {
e.dataTransfer.dropEffect = 'copy' e.dataTransfer.dropEffect = 'copy'
}, },
resize (e) { resize (e) {
if (!e.target) { return } const target = e.target || e
const vertPadding = Number(window.getComputedStyle(e.target)['padding-top'].substr(0, 1)) + if (!(target instanceof window.Element)) { return }
Number(window.getComputedStyle(e.target)['padding-bottom'].substr(0, 1)) const vertPadding = Number(window.getComputedStyle(target)['padding-top'].substr(0, 1)) +
e.target.style.height = 'auto' Number(window.getComputedStyle(target)['padding-bottom'].substr(0, 1))
e.target.style.height = `${e.target.scrollHeight - vertPadding}px` // Auto is needed to make textbox shrink when removing lines
if (e.target.value === '') { target.style.height = 'auto'
e.target.style.height = '16px' target.style.height = `${target.scrollHeight - vertPadding}px`
if (target.value === '') {
target.style.height = null
} }
}, },
clearError () { clearError () {