bug: textarea in ion-item collapses when list scrolled

[zapatek]

Type: bug

Platform: android 4.4 webview

When there is a textarea (higher than single row) in an ion-item within an ion-list, and if the textarea has focus (keyboard showing) and the ion-list is scrolled, then the textarea collapses into a single row while scrolling is on and the bar is visible. The moment the scrolling stops (scroll bar fades) the text area is enlarged to its actual height again.

As an additional problem, when the textarea is large and by itself not scrollable (overflow:hidden) and has focus, then the ion-list also cannot be scrolled by dragging within the textarea either. The list has to be dragged by tapping some place outside the textarea. But if the textarea is very large covering the whole screen, then this becomes a big limitation when trying to edit portions of the textarea that fall outside the screen.

[mhartington]

Hey any chance you can put together a codepen or plunker for this and test it against the nightly builds?

[zapatek]

Hi Mike, Here is the codepen:

http://codepen.io/zapatek/pen/LmAFf

[mhartington]

Ah alright, I see what you mean. Going to pass this to @perrygovier for further investigation

[samal-rasmussen]

I'm having this issue too on beta 11, only outside of an ion-list.

I can see that an extra textarea with class "cloned-text-input" is being added, as is explained here: http://forum.ionicframework.com/t/textarea-and-input-display-problems/4161/13

But I can see that this clone isn't given the same classes or style as the original, and so just has default height.

[samal-rasmussen]

Found out that putting the textarea inside a label element and giving the textarea it's height via a class, makes the height stay while scrolling. Don't use the rows attribute.

This might just be a case of intended behavior and missing or unclear documentation.

[dargonar]

@samal84 solution works for me.

[scmsystm]

Can we use focusInput.cloneNode() at js/utils/tap.js:191 rather than create new element then clone focused input style?

In my case, if textarea height was set in css then modified by javascript, the cloned textarea height are not equal to newly modified height. (an auto-growing textarea that height modified by scrollHeight itself).

I modify the js/utils/tap.js:184 cloneFocusedInput function like this and the cloned input just fine.
But, I don't really know about the performance.

  cloneFocusedInput: function(container, scrollIntance) {
    if (ionic.tap.hasCheckedClone) return;
    ionic.tap.hasCheckedClone = true;

    ionic.requestAnimationFrame(function() {
      var focusInput = container.querySelector(':focus');
      if (ionic.tap.isTextInput(focusInput)) {
        var clonedInput = focusInput.cloneNode(true);
        if (clonedInput) {
          clonedInput.value = focusInput.value;
          clonedInput.classList.add('cloned-text-input');
          clonedInput.readOnly = true;
          if (focusInput.isContentEditable) {
            clonedInput.contentEditable = focusInput.contentEditable;
            clonedInput.innerHTML = focusInput.innerHTML;
          }
          focusInput.parentElement.insertBefore(clonedInput, focusInput);          
          focusInput.classList.add('previous-input-focus');

          clonedInput.scrollTop = focusInput.scrollTop;
        }
      }
    });
  }