mirror of
https://github.com/NoRedInk/noredink-ui.git
synced 2024-12-30 00:52:50 +03:00
b907c12d7a
The old logic looked like this:
```
if (this._textarea.scrollHeight > minHeight) {
this._textarea.style.height = minHeight + 'px'
this._textarea.style.height = this._textarea.scrollHeight + 'px'
}
```
Imagine a case where the `minHeight` is actually less than the current
height of the text area due to the current content. The height of the
element would be set to a smaller value, and then later reset to the
desired height. This causes the overall scroll height of the page to
shrink (because the text-area did), and then expand again. Now the
scroll position for the user on the page has changed, and this happens
on every keystroke.
This change just skips the first assignment to `.height`. I'm not sure why it
was initially there, but I can't see a reason for keeping it (especially
since it seems to be the cause of this bug).
57 lines
1.5 KiB
JavaScript
57 lines
1.5 KiB
JavaScript
CustomElement = require('../CustomElement')
|
|
|
|
CustomElement.create({
|
|
tagName: 'nri-textarea-v4',
|
|
|
|
initialize: function() {
|
|
this._autoresize = false
|
|
},
|
|
|
|
onConnect: function() {
|
|
this._textarea = this.querySelector('textarea')
|
|
this._updateListener()
|
|
},
|
|
|
|
observedAttributes: ['data-autoresize'],
|
|
|
|
onAttributeChange: function(name, previous, next) {
|
|
if (name === 'data-autoresize') {
|
|
this._autoresize = next !== null
|
|
if (!this._textarea) return
|
|
this._updateListener()
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
_updateListener: function() {
|
|
if (this._autoresize) {
|
|
this._textarea.addEventListener('input', this._resize)
|
|
this._resize()
|
|
} else {
|
|
this._textarea.removeEventListener('input', this._resize)
|
|
}
|
|
},
|
|
|
|
_resize: function() {
|
|
var minHeight = null
|
|
if (this._textarea.style.minHeight) {
|
|
minHeight = parseInt(this._textarea.style.minHeight, 10)
|
|
} else {
|
|
minHeight = parseInt(window.getComputedStyle(this._textarea).minHeight, 10)
|
|
}
|
|
if (minHeight === 0) {
|
|
minHeight = parseInt(window.getComputedStyle(this._textarea).height, 10)
|
|
}
|
|
|
|
this._textarea.style.overflowY = 'hidden'
|
|
this._textarea.style.minHeight = minHeight + 'px'
|
|
this._textarea.style.transition = 'none'
|
|
if (this._textarea.scrollHeight > minHeight) {
|
|
this._textarea.style.height = this._textarea.scrollHeight + 'px'
|
|
} else {
|
|
this._textarea.style.height = minHeight + 'px'
|
|
}
|
|
}
|
|
}
|
|
})
|