Компонент редактора PrimeNG с автофокусом при загрузке страницы

Question

Я использую Компонент редактора библиотеки пользовательского интерфейса PrimeNG . В настоящее время версия 6.1.2. Проблема появляется, когда страница загружена, и в редакторе есть некоторое содержимое, страница автоматически прокручивается в редактор и фокусируется на нем. Как отключить этот автофокус? Я пытался использовать простой window.scroll(0,0), но выглядит странно, когда при загрузке страницы он прокручивается вниз, а затем вверх.

Вероятно, проблема с текстовым редактором Quill, который используется в PrimeNG. В любом случае, есть ли обходной путь здесь? Спасибо.

Answer 1

Мы получили следующее решение: пришлось добавить директиву , в которой используется метод NgOnChanges (поскольку проблема возникает не только при загрузке страницы, но и при программном изменении содержимого). Таким образом, при изменении действия стиль отображения меняется на «none», затем после тайм-аута показывается элемент.

Директива:

import { Directive, Input, OnChanges, SimpleChange, ElementRef } from "@angular/core";

@Directive({
    selector: '[p-editor-model]'
})
export class PeAutoscrollFixDirective implements OnChanges {
    @Input("p-editor-model") content: string;

    ngOnChanges(changes: { [property: string]: SimpleChange }) {
        let change = changes["content"];
        let elemPosition = this.element.nativeElement.getBoundingClientRect().top + document.body.scrollTop;
        let clientHeight = document.documentElement.clientHeight;

        if (change.isFirstChange() || elemPosition > clientHeight)
        {
            this.element.nativeElement.style.display = 'none';
            setTimeout(() => {
                this.element.nativeElement.style.display = '';
            });
        }
    }

    constructor(private element: ElementRef) {
    }
}

Необходимо добавить эту директиву в модуль как декларации и экспорт.

И использование этой директивы выглядит следующим образом:

<p-editor [p-editor-model]="model" [(ngModel)]="model"></p-editor>

Answer 2

Вы можете установить стиль отображения редактора: ни один, пока ваша страница не загрузится. После загрузки включите отображение: inline; используя setTimeout (), если вы используете JavaScript.