Auto resizing sl-textarea makes page scroll to top when typing

[DevDuki]

Describe the bug

When the textarea, with the resize="auto" property set, becomes larger than it fits on the screen, it scrolls the page back to top on every additional new line.

To Reproduce

Steps to reproduce the behavior:

1. Add an sl-textarea anywhere in the page
2. type new lines until the textarea overflows the page
3. Keep creating new lines between typing some letters and notice how it keeps scrolling up

Demo

https://jsfiddle.net/Dukiii/m4cvhLrw/1/

Screenshots

screencast.2024-09-23.12-22-42.mp4

Browser / OS

• OS: Mac
• Browser: Chrome
• Browser version: 128

[DevDuki]

One workaround that works to prevent this behavior, is setting a height to the sl-textarea equal to the part="form-control" element's height, inside an sl-input event handler.

const onInput = () => {
  this.textArea.style.height = `${this.textArea.shadowRoot?.querySelector('[part="form-control"]')?.scrollHeight}px`;
}

I assume that this could be a similar issue vuetify used to have? vuetifyjs/vuetify#5314
Maybe this helps finding the source of this bug and a possible bugfix.

[KonnorRogers]

Thanks for the report and the suggested workarounds.

I ended up finding something that worked across all 3 browsers pretty cleanly.

#2182

And here's the "fixed" jsfiddle:

https://jsfiddle.net/n158gvy7/3/

If you don't mind giving it a quick test, that would help me a ton!

[DevDuki]

Thank you for the quick fix! It works fine on my side too. Also tested it on all 3 browsers and nothing is shaking or irritating.

[DevDuki]

I just updated the shoelace version in my project with this fix and noticed something strange on mobile firefox. At some point the height starts flickering within 1px (in my case between 530px and 531px). It also stops and continues between each typed letter. When it stops you can see on the inspector that the heights of the textarea and the adjuster aren't in sync. Perhaps that is the culprit? Maybe some rounding error is happening.

I tested it on firefox and chrome on my android phone and it only happens on firefox (couldn't test Safari, because I don't have an iOS device).

Not sure if using .getBoundingClientRect().height instead of .clientHeight would fix this issue?

Firefox version: 132.0
Android version: 14

---

Notice the flickering of the markdown toolbar.

screen.recorder.phone.mp4

---

Here you can see the mentioned behaviour between each keystroke on phone (the counter in the help text attribute is the character counter, you can use this to understand when i typed a new letter). This is a recording of the inspector, using external debugging on my phone's firefox browser.

flickering.heights.mp4

---

@KonnorRogers Could you please check if you get the same behaviour? Perhaps it is only a phenomena I am experiencing.