Closed bjovanov closed 2 years ago
I am facing the same issue with v8.1.1 Could you show me show did you override the resize method for the textarea?
@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 || {}); };
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!!
I was referring to this commit https://github.com/primefaces/primeng/commit/d90db593c2c34931ec043cd9ee48514235150cde where removing one assignment of this.el.nativeElement.style.height somehow solves the problem and also with the explanation from here https://github.com/angular/material/issues/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.
I am experiencing this issue in my corporate application, is there a timeline for this bug to be fixed?
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:
Observed behaviour: The dialog scroll top.
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
Issue still exists. https://stackblitz.com/edit/github-sqvi4f
I'm submitting a ... [x] bug report => Bug fixed with https://github.com/primefaces/primeng/issues/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.