tldr: here’s the code if that’s what you’re here for.
Forgive the shameless Stranger Things fandom, but there’s a good metaphor in there. The “upside down” is a world that mirrors our own, but it’s hidden from our view, and it’s way damn spookier.
Well, to get tricky form elements to do what we want, we’re gonna need to go there.
Recently I wanted to make a <textarea> element automatically expand vertically as text is entered. A basic <div> element would do this, but form elements are a different animal. For example, watch what happens as a word breaks onto the next line:
The <textarea> doesn’t expand to fit the content inside. This can get pretty annoying if you’re trying to keep track of your writing. There is no pure CSS solution. If you’re a masochist you can stop what you’re doing and resize it manually…
But it’s 2016 and that seems insane. Just fixing the element to a static height is not an option either. The intended behavior that I have in mind is more like this:
So how do we get there? Well, we’re going to build a ghost <div> that mirrors the contents of the <textarea>. Then when the hidden <div> resizes, we apply that height to the <textarea>. And to make sure the hidden element is not problematic for assistive technology, we add aria-hidden="true".
It’s not the most original idea, but I figured that an implementation in React is probably useful for some people. The barebones component is in a Gist below.
Or get a full example in JSFiddle.
Update 8/29: Coincidentally it turns out that Edenspiekermann alumnus Max Hoffman has an excellent vanilla JS solution to this as well. It’s worth mentioning here, in case you need something non React-specific.
