InputTextArea auto-resize moves scroll position

[bjovanov]

I'm submitting a ...
[x] bug report => Bug fixed with #7481 is re-introduced.

Current behavior
Auto resize moves scroll position. Issue still persists due to this line
https://github.com/primefaces/primeng/blob/master/src/app/components/inputtextarea/inputtextarea.ts#L64

Expected behavior
Setting auto resize shouldn't affect the scrolling. Issue is solved if the offending line is removed.
Current workaround is by overriding the resize method of textarea, but proper solution is needed.

This is broken in latest v8 (8.1.1) and also on master.

[ginettev]

I am facing the same issue with v8.1.1
Could you show me show did you override the resize method for the textarea?

[bjovanov]

@ViewChild(InputTextarea, {static: true})
textarea: InputTextarea;

this.textarea.resize = (event) => {
this.textarea.el.nativeElement.style.height = this.textarea.el.nativeElement.scrollHeight + 'px';
if (parseFloat(this.textarea.el.nativeElement.style.height) >=
parseFloat(this.textarea.el.nativeElement.style.maxHeight)) {
this.textarea.el.nativeElement.style.overflowY = 'scroll';
this.textarea.el.nativeElement.style.height = this.textarea.el.nativeElement.style.maxHeight;
} else {
this.textarea.el.nativeElement.style.overflow = 'hidden';
}
this.textarea.onResize.emit(event || {});
};

[ginettev]

With some more fiddling I realised that the height = 'auto' is not the culprit.
The proper fix is remembering the scroll position before the resize and scrolling to it after the resize as follows:

      const scrollLeft = this._window.pageXOffset;
      const scrollTop = this._window.pageYOffset;

        this.el.nativeElement.style.height = 'auto';
        this.el.nativeElement.style.height = this.el.nativeElement.scrollHeight + 'px';

        if (parseFloat(this.el.nativeElement.style.height) >= parseFloat(this.el.nativeElement.style.maxHeight)) {
            this.el.nativeElement.style.overflowY = "scroll";
            this.el.nativeElement.style.height = this.el.nativeElement.style.maxHeight;
        }
        else {
            this.el.nativeElement.style.overflow = "hidden";
        }

        this._window.scrollTo(scrollLeft, scrollTop);

        this.onResize.emit(event||{});

I have tested this in multiple browsers (even IE) and it works!!

[bjovanov]

I was referring to this commit d90db59 where removing one assignment of this.el.nativeElement.style.height somehow solves the problem and also with the explanation from here angular/material#3070 I assumed that the 'auto' setting has something to do with it. Your solution makes sense, but still I cannot explain why having two assignments on same property one after the other causes scroll jumping.

[ShelbyKelley]

I am experiencing this issue in my corporate application, is there a timeline for this bug to be fixed?

[JulianFarhi]

Hi,
I'm facing the same problem but slightly different.
In my case, I use the inputTextarea inside a dialog (DynamicDialog).
On the main dialog container, I apply custom styles:

max-height: 100%;
overflow: auto;

My inputTextarea has the autoResize attribute with the value true.
When an event like focus or blur is triggered, the main dialog container scroll top.

I have created a stackblitz (forked from the original dynamic dialog stackblitz).
I added a textarea in the productlist component.
The primeng version is 11.3.0.
The weird behaviour appears on Firefox.

https://stackblitz.com/edit/primeng-dynamicdialog-demo-bjvlru?file=src%2Fapp%2Fproductlistdemo.ts

To reproduce the behaviour:

• Click on the "show" button
• Scroll down to access the textarea
• Click on the textarea
• Fill the textarea with enough text (about 10 lines)
• And click outside the textarea (blur)

Observed behaviour:
The dialog scroll top.

[cetincakiroglu]

Hi,

If the issue still exists with the latest PrimeNG version, please provide a StackBlitz example by using PrimeNG Issue Template and re-open the issue.

Regards

[marioosh-net]

Issue still exists.
https://stackblitz.com/edit/github-sqvi4f