When textarea is initially hidden it is very short when appears

[artur79]

I have to make some textareas visible/hidden depending on radio selector, when I reveal one it has like 1/2 line height and I need to enter any character to make it autogrow to the correct size. It's because this.element.scrollHeight is zero for hidden elements. I'v experienced same issue with another autogrow stilumulus plugin too.

[artur79]

Here is my quick solution for the issue, basically it checks if element scroll height is zero, if so it calculates number of lines and line height plus top and bottom margins and sets it initially. Review please and if you like it I may prepare PR.

import TextareaAutogrow from "stimulus-textarea-autogrow"

export default class extends TextareaAutogrow {
  connect() {
    super.connect()

    if(this.element.scrollHeight == 0) { // element is initially hidden
      this.element.style.height = `${(this.linesCount() * this.lineHeight()) + this.getPaddingsSum()}px`
    }
  }

  getStyle(el, styleProp) {
    let y = null
    if (el.currentStyle)
      y = el.currentStyle[styleProp]
    else if (window.getComputedStyle)
      y = document.defaultView.getComputedStyle(el,null).getPropertyValue(styleProp)
    return y
  }

  linesCount() {
    return this.element.value.split("\n").length || this.element.rows
  }

  lineHeight() {
    let height_px = this.getStyle(this.element, 'line-height')
    return parseInt(height_px) || 0
  }

  getPaddingsSum() {
    let sum = 0
    let padding_top_px = this.getStyle(this.element, 'padding-top')
    if(padding_top_px) {
      sum += parseInt(padding_top_px) || 0
    }
    let padding_bottom_px = this.getStyle(this.element, 'padding-bottom')
    if(padding_bottom_px) {
      sum += parseInt(padding_bottom_px) || 0
    }
    return sum
  }
}

[trsteel88]

@artur79 you could also solve this be setting a min-height on your textarea.

[trsteel88]

Actually, min height would only work if the field is empty then. Thanks for the code snippet @artur79 :)

Be great to have this merged in.

[duleorlovic]

@artur79 nice fix, I'm using oozou code until your patch is merged. I added /dist to repo https://github.com/duleorlovic/stimulus-textarea-autogrow so it can be used like

yarn add "https://github.com/duleorlovic/stimulus-textarea-autogrow.git"

[ThomasLandauer]

I'm observing that autogrow isn't working at all if the textarea isn't visible initially (in my case it's in a closed <details>), even if there is text in it. So this can't be fixed by adding a min-height. Is this related or should I open a separate issue for it?

[Petercopter]

I'm seeing the same behavior when trying to use the autogrow plugin in a Bootstrap modal. As soon as you add a character, it snaps to the correct height.

EDIT: This particular case is because the modal is added to the DOM while hidden, then there's a CSS transition in. The solution is to trigger an update after the modal is completely shown.

[florentdestremau]

@artur79 you made my day ! (or my night i should say). Thanks. I added a 1.5 multiplier (then rounded) for lines count to be sure all text was visible. My case is a translation form with bootstrap tabs for every locale.

[katekostina]

@Petercopter can you please help, how to trigger an update after the modal is completely shown?

[solilin]

@katekostina, you can call the autogrow method of textarea-autogrow, for example, when the modal is opened. Something like this:

In the modal_controller, on modal show, use this.dispatch('show'), and on the textarea, use action: "modal:show@window->textarea-autogrow#autogrow".