Vuetify: Multi-line text field set to auto-grow does not auto-shrink

[chriswa]

Steps to reproduce

Create a v-text-field multi-line auto-grow rows="1".
Add multiple lines of content and observe the height of the field growing to accommodate the new content.
Remove lines of content.

Versions

Vue.js v2.4.2
Vuetify v0.14.5
Codepen
Chrome Version 59.0.3071.115 (Official Build) (64-bit)

What is expected ?

v-text-field should shrink when lines are removed, as per the example video for Multi-line fields at https://material.io/guidelines/components/text-fields.html

What is actually happening ?

The field never shrinks.

Reproduction Link

https://codepen.io/anon/pen/MvgzGX?editors=1010

[johnleider]

I'm going to auto-shrink you @chriswa.

[chriswa]

Here's some proof of concept code which may be helpful?

calculateInputHeight () {

  // remember original height and class so we can revert these changes after extracting the scrollHeight
  const originalHeight      = this.$refs.input.style.height
  const originalClassName   = this.$refs.input.className

  // temporarily disable transitions and reset height
  this.$refs.input.className    += " ripple__animation--enter" // arbitrary style which has { transition: none }
  this.$refs.input.style.height = 'auto'

  // extract accurate scrollHeight
  const scrollHeight = this.$refs.input.scrollHeight

  // revert changes to height and class
  this.$refs.input.style.height = originalHeight
  this.$refs.input.className    = originalClassName

  // don't ever shrink further than "rows" prop
  const minHeight = this.rows * 24
  this.inputHeight = scrollHeight < minHeight ? minHeight : scrollHeight
},

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. Please direct any non-bug questions to our Discord