Scrolling in a textarea tag does not work as expected

[andreymyssak]

After a few scrolls of , which is inside the perfect scrollbar, it starts to work incorrectly. The scroll disappears, but if you select the text and swipe it up or down, the scroll returns. After repeating the same steps, the problem repeats again. The scroll at <textarea /> disappears by the third scroll.</p> <p>Steps to reproduce:</p> <ol> <li>Scroll the textarea tag;</li> <li>Scroll the container;</li> <li>Scroll the textarea tag;</li> <li>Scroll the container;</li> <li>Scroll the textarea tag (on this step you can see the problem).</li> </ol> <p>Please, watch the <a rel="noreferrer nofollow" target="_blank" href="https://vimeo.com/558541975">video</a> to understand the problem (bug shown after 13 seconds). You can reproduce this issue in <a rel="noreferrer nofollow" target="_blank" href="https://codesandbox.io/s/perfect-scrollbar-text-area-srv19?file=/src/App.js">Sandbox</a>.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/danielnadar75"><img src="https://avatars.githubusercontent.com/u/33997794?v=4" />danielnadar75</a> commented <strong> 2 years ago</strong> </div> <div class="markdown-body"> <p>Hi even I am facing the same issue, once the scroll bar of text area reached the end (top or bottom) and if I leave the mouse and then try to scroll with the text area focused it isn't working instead it's scrolling the parent? Kindly look into it and if there's any way to make it to work with some settings it would help. Thanks again.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/illiabakunovskyi"><img src="https://avatars.githubusercontent.com/u/33200788?v=4" />illiabakunovskyi</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <p>Solution to your problem is to add 'ps__child--consume' class to textarea to let scrollbar event be consumed by it's child - textarea. This helped me with the same problem, documentation should be updated for sure.</p> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>