How to make `textarea` auto-resize with Alpine.js

[nelsonic]

At present we have a <textarea> for capturing items in the MVP App:

If we input too much text into the <textarea> it starts to scroll which is a poor experience on mobile.

On desktop it kinda works to have a smaller box ...

But it would also be nice to tidy up the UX around the input area.

Todo

• [ ] Research how to make the <textarea> resize automatically depending on the content.
• [ ] Should not expand more than the height of the screen minus the keyboard.

Starting point: https://benborgers.com/posts/alpine-textarea-auto-resize + https://youtu.be/z7130uJ3H7w

[nelsonic]

@SimonLab I don't know if this will take more than T2h ... ⏳ 💭 🤷‍♂️
(if it takes longer, please just update the label ...) Please record your progress in this thread so everyone understands the code.

Having just watched: "Alpine.js Auto Textarea Height" https://youtu.be/z7130uJ3H7w

I feel like we could get a basic version of this working in T25m. 🤞 The tricky part will be the maximum height. But I think Tailwind max-height should help us with that: https://tailwindcss.com/docs/max-height Or we can derive it based on the screen height and set that as the limit.

[nelsonic]

This UI/UX still bugs me while using the MVP mvp.fly.dev ... 🙄

@SimonLab if you want to pair on this today [Friday] please LMK. 🧑‍💻 Would make a good break from working on the README.md ... https://github.com/dwyl/app-mvp-phoenix/issues/89 😜

[SimonLab]

I've created the PR https://github.com/dwyl/app-mvp/pull/117 Let me know if it works for you @nelsonic

[nelsonic]

@SimonLab was hoping that we could create the functionality here first so that anyone finding this in the future can understand how we solved it. and .then apply it in the MVP & App. 💭

[nelsonic]

Working on: https://mvp.fly.dev

[nelsonic]

@SimonLab please add a simple example of this in the form of a resizing-textarea.html in this repo project. 🙏 New file called resizing-textarea.html. Linked to from the README.md 🔗