From d4bb9e1885b1525c4757f5edbe7df2fad40a5d66 Mon Sep 17 00:00:00 2001
From: jojohoch <joachim.hoch@iqb.hu-berlin.de>
Date: Tue, 24 Sep 2024 11:33:42 +0200
Subject: [PATCH] Fix chromium bug when calculating dynamic rows for text areas
#691
- Due to the width of the scrollbar, text areas change their inner width
under Chromium when the scrollbar is displayed. The use of offsetWidth
instead of contentRect ignores the presence of the scrollbar. The
calculation is therefore less accurate, but sufficient for estimating
the number of rows
---
docs/release-notes-common.md | 4 ++++
.../directives/dynamic-rows.directive.ts | 18 ++++++++++++++----
2 files changed, 18 insertions(+), 4 deletions(-)
diff --git a/docs/release-notes-common.md b/docs/release-notes-common.md
index fb2ef3e98..9ce4ee9cf 100644
--- a/docs/release-notes-common.md
+++ b/docs/release-notes-common.md
@@ -1,5 +1,9 @@
Allgemein
=========
+## next
+### Fehlerbehebungen
+- Behebt "Flackern"-Fehler von Eingabebereichen mit dynamischen Zeilen unter Chromium
+
## editor/2.5.0+player/2.5.0
### Neue Funktion
- Neues Element: Tabelle
diff --git a/projects/common/directives/dynamic-rows.directive.ts b/projects/common/directives/dynamic-rows.directive.ts
index 6430cd7e6..39378d81a 100644
--- a/projects/common/directives/dynamic-rows.directive.ts
+++ b/projects/common/directives/dynamic-rows.directive.ts
@@ -1,11 +1,21 @@
import {
- AfterViewInit, ChangeDetectorRef, Directive, ElementRef, EventEmitter, Input, NgZone, OnChanges, Output, SimpleChanges
+ AfterViewInit,
+ ChangeDetectorRef,
+ Directive,
+ ElementRef,
+ EventEmitter,
+ Input,
+ NgZone,
+ OnChanges,
+ OnInit,
+ Output,
+ SimpleChanges
} from '@angular/core';
@Directive({
selector: '[dynamicRows]'
})
-export class DynamicRowsDirective implements AfterViewInit, OnChanges {
+export class DynamicRowsDirective implements OnInit, AfterViewInit, OnChanges {
@Input() fontSize!: number;
@Input() expectedCharactersCount!: number;
@Output() dynamicRowsChange: EventEmitter<number> = new EventEmitter<number>();
@@ -20,9 +30,9 @@ export class DynamicRowsDirective implements AfterViewInit, OnChanges {
) {}
ngOnInit(): void {
- this.observer = new ResizeObserver(entries => {
+ this.observer = new ResizeObserver(() => {
this.zone.run(() => {
- this.width = (entries[0].contentRect.width);
+ this.width = this.elementRef.nativeElement.offsetWidth;
this.calculateDynamicRows();
});
});
--
GitLab