remove the "textbox grows the 'wrong' way" behavior, replace it with more
conditions to scroll to bottom
This commit is contained in:
parent
6511a744a2
commit
37b8490c01
1 changed files with 9 additions and 7 deletions
|
@ -301,9 +301,6 @@ const PostStatusForm = {
|
||||||
const bottomPadding = Number(bottomPaddingStr.substring(0, bottomPaddingStr.length - 2))
|
const bottomPadding = Number(bottomPaddingStr.substring(0, bottomPaddingStr.length - 2))
|
||||||
const vertPadding = topPadding + bottomPadding
|
const vertPadding = topPadding + bottomPadding
|
||||||
|
|
||||||
const oldHeightStr = target.style.height || ''
|
|
||||||
const oldHeight = Number(oldHeightStr.substring(0, oldHeightStr.length - 2))
|
|
||||||
|
|
||||||
/* Explanation:
|
/* Explanation:
|
||||||
*
|
*
|
||||||
* https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight
|
* https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight
|
||||||
|
@ -340,12 +337,17 @@ const PostStatusForm = {
|
||||||
// to find offset relative to scrollable container (scroller)
|
// to find offset relative to scrollable container (scroller)
|
||||||
const rootBottomBorder = rootRef.offsetHeight + findOffset(rootRef, scrollerRef).top
|
const rootBottomBorder = rootRef.offsetHeight + findOffset(rootRef, scrollerRef).top
|
||||||
|
|
||||||
const textareaSizeChangeDelta = newHeight - oldHeight || 0
|
|
||||||
const isBottomObstructed = scrollerBottomBorder < rootBottomBorder
|
const isBottomObstructed = scrollerBottomBorder < rootBottomBorder
|
||||||
|
const isRootBiggerThanScroller = scrollerHeight < rootRef.offsetHeight
|
||||||
const rootChangeDelta = rootBottomBorder - scrollerBottomBorder
|
const rootChangeDelta = rootBottomBorder - scrollerBottomBorder
|
||||||
const totalDelta = textareaSizeChangeDelta +
|
// The intention is basically this;
|
||||||
(isBottomObstructed ? rootChangeDelta : 0)
|
// Keep bottom side always visible so that submit button is in view EXCEPT
|
||||||
|
// if root element bigger than scroller and caret isn't at the end, so that
|
||||||
|
// if you scroll up and edit middle of text you won't get scrolled back to bottom
|
||||||
|
const shouldScrollToBottom = isBottomObstructed &&
|
||||||
|
!(isRootBiggerThanScroller &&
|
||||||
|
this.$refs.textarea.selectionStart !== this.$refs.textarea.value.length)
|
||||||
|
const totalDelta = shouldScrollToBottom ? rootChangeDelta : 0
|
||||||
const targetScroll = currentScroll + totalDelta
|
const targetScroll = currentScroll + totalDelta
|
||||||
|
|
||||||
if (scrollerRef === window) {
|
if (scrollerRef === window) {
|
||||||
|
|
Loading…
Reference in a new issue