stimulus-textarea-autogrow icon indicating copy to clipboard operation
stimulus-textarea-autogrow copied to clipboard

Published 20 hours ago • verified publisher icon stimulus-components

Schedule reflows with requestAnimationFrame

Open Saoma1 opened this issue 1 year ago • 1 comments

Description: The current behavior of the textarea autogrow causes scrolling problems, the scrollbar may jump or scroll unexpectedly, see video below. I believe the bug arises from the reflow caused by the autogrow functionality of the textarea, more info can be found here. Additionally, the proposed solution also resolves the issue from @yshmarov, https://github.com/stimulus-components/stimulus-textarea-autogrow/issues/3.

https://github.com/stimulus-components/stimulus-textarea-autogrow/assets/42046773/2b4c0e8e-c7b8-492c-b415-b5a75dadb4ec

Solution: The fix introduced in this pull request utilizes the requestAnimationFrame method to optimize the textarea autogrow behavior. When the textarea's height needs to be adjusted, instead of making immediate changes, we schedule the adjustment to occur during the next animation frame. This ensures that the browser can handle the layout changes more efficiently and prevents the scroll issues that occurred during reflow. By synchronizing the height adjustment with the browser's rendering cycle, we achieve a smoother and more stable scrolling experience.

Please review this pull request and provide any feedback or suggestions.

Saoma1 avatar May 16 '23 12:05 Saoma1

That is a great idea! But on my side it does not fix the problem on Firefox and Chrome...

As mentioned here maybe we should just wrap https://github.com/jackmoore/autosize?

guillaumebriday avatar May 19 '23 12:05 guillaumebriday