Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Auto-resize changes pageOffsetY in Chrome when textarea is near bottom of window

See original GitHub issue

Describe the bug

When a b-form-textarea with more lines than it’s rows attribute is edited, it can cause the window to scroll upwards. To me, it looks like this happens because the textarea shrinks in height due to height being set to auto in the on-change handler in form-textarea.js:176. If the window’s bottom is now higher than the screen’s bottom, the browser automatically scrools upwards to fill the empty space. Now, the textarea is reset in it’s height, but the new scroll position is already set and doesn’t change back.

Please note that I have only observed this bug in Chrome and could not reproduce it in Firefox.

Steps to reproduce the bug

Create a b-form-textarea and fill it with so many lines, that rows <= # lines <= max-rows. The textarea must overflow one of it’s parents and cause a scroll bar.
Scroll to the very bottom of the overflowed parent.
Edit the textarea. The parent should now have scrolled up.

Expected behavior

The scrolling position should not change whenever editing a textarea, unless it is to display a new line that was added that would have otherwise been off-screen.

Versions

Libraries: (See CodeSandbox below)

BootstrapVue: 2.16.0
Bootstrap: 4…5.2
Vue: 2.6.0

Environment:

Device: PC
OS: Windows 10
Browser: Chrome (works in Firefox!)
Version: 84.0.4147.135

Demo link

See this CodeSandbox. Make sure to follow the steps above to observe the issue.

Additional context

I came across this bug in vabene1111/recipes and opened an issue there already. That issue contains a GIF showing the behavior in the app that might be helpful in case my description wasn’t understandable enough.

Issue Analytics

State:
Created 3 years ago
Comments:19 (7 by maintainers)

Top GitHub Comments

1reaction

Hiwscommented, Sep 12, 2020

I’ve just tested it in Firefox 79 & 80.0.1. Chrome 85 and Chromium Edge 85. It appears to be an issue on all of them. However, i remember testing it in Firefox when the issue was made and didn’t experience any issues then. However it might’ve been an old version since i rarely use Firefox.

The screencap below is in Firefox. BsM6itf 1

That’s atleast the case if i understand the issue correctly.

1reaction

Hiwscommented, Sep 1, 2020

Looks like you were correct about it being a separate issue. I’ve opened another issue to track it: https://github.com/bootstrap-vue/bootstrap-vue/issues/5715 Thanks for helping out 👍