fix(Textarea): autoresize

[smarroufin]

Fixes nuxt/nuxt.com#219

The main issue was that we didn't "reset" the height by forcing it to "auto" (or something equivalent) to force the refresh of scrollHeight.

The good old way was working but in some ways was breaking the padding a bit.

textarea.style.height = 'auto'
textarea.style.height = `${textarea.scrollHeight}px`

So I took the same logic mixed with the current method:

// init to a default height using rows
textarea.value.rows = props.rows

// once the `scrollHeight` is properly refreshed, compute pretty much the same way the needed rows
const styles = window.getComputedStyle(textarea.value)
const paddingTop = parseInt(styles.paddingTop)
const paddingBottom = parseInt(styles.paddingBottom)
const padding = paddingTop + paddingBottom
// use `lineHeight` to avoid unprecise pixel value which was happening with the previous method
const lineHeight = parseInt(styles.lineHeight)
const { scrollHeight } = textarea.value
const newRows = (scrollHeight - padding) / lineHeight

// make sure we don't go below the minimum request amount
if (newRows > props.rows) {
  textarea.value.rows = newRows
}

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/nuxtlabs/ui/Dzrv595wsttpcCrCxf14j4hjtD2b
✅ Preview: https://ui-git-fix-textarea-autoresize-nuxtlabs.vercel.app