Issue when textarea reaches the end of the window height size

[SunnyAureliusRichard]

Greetings!

There's an issue with the view height flipping between where the cursor is, and the top of the page.

Demo available @ https://codesandbox.io/s/tailwind-css-and-react-forked-qhfgif?file=/src/components/Homepage.js

To reproduce, do the same as in the gif:

PS: in the README.md file for the label it should be htmlFor="my-textarea" --- not for="my-textarea"

To fix, this line has to be commented out el.style.height = '0'

[rpearce]

Thanks for reporting this and providing a demo — that is very helpful.

Commenting out that line prevents the auto-resizing from working.

I'll need to think on this one... Other ideas are welcome, as well.

[SunnyAureliusRichard]

It works fine for me, what's the issue?

[rpearce]

In the screenshot above, the textarea does not resize with the content, and that is what this library is supposed to do.

If you run the Storybook examples (npm start) in the project and comment that line out, this quickly becomes apparent:

The minimalist text area does not resize

The regular text area does not resize

There are 7 examples, and none of them function.

[SunnyAureliusRichard]

The solution might be to create another textarea that is hidden, with the same text as the "real" textarea, that can be used to fetch the height the expanding textarea should set to

see: https://stackoverflow.com/a/56914733/1204843

[rpearce]

I'm aware of this technique, but I'm personally not a fan of having duplicate markup and content like that in the browser for a few reasons.

I will try to find a different solution. Thanks for your patience

[rpearce]

@SunnyAureliusRichard If you get a moment, are you able to evaluate #85? If I don't hear back within a few days, I'll ship it out and follow back up here.

[SunnyAureliusRichard]

Hi @rpearce

Thank you for this. It does seem to fix the problem, but it's not as smooth as it could be.

Here is "Style changes" story with the line "height = 0" commented out, and without the fix you've suggested. Notice that when I add more lines, the page continues to scroll down.

And here is the same story, with the line "height = 0" left in, and with the fix you've suggested. Notice that when I add more lines, the page scrolls up, and only a part of the textarea is visible.

Thanks

[rpearce]

Thanks for taking a look. When I get some time, I'll see if maybe I only do the height = 0 when the value's length is reduced 🤔 . The reason for it is when you remove content, it needs to resize to fit the new size.

[SunnyAureliusRichard]

I think doing that will result in the same difference between the gifs in the last post. I know why it's important to have height = 0. I don't know an elegant way to fix this either. It's definitely a tricky one.

[templeman15]

Commenting back here as I'm running into the same issue. Any plan to merge in the PR or try the height = 0?

Thank you!

[rpearce]

@templeman15 Both approaches have their own issue (see my note above about that height: 0), and I put this on the side after diving in for a bit and not getting anywhere.

I'll consider this an opportunity to think about it a little more.

[templeman15]

@rpearce just looping back, I ended up switching to:

react-textarea-autosize

Maybe you could check out what they're doing. Best of luck 👍🏼

[rpearce]

I've spent a couple of nights refactoring this project to find a simpler way.

I need to do way more testing, but I may have just re-implemented this in 729 bytes (minified & gzipped) and also solved this problem in the process (proof of concept).

We'll see how this shakes out! There's a good deal bit to play with. Stay tuned...