1

I have an expansion panel with "Write a response" header. On opening the expansion panel, I'm having a quill editor.

I need to focus the quill editor on expanding the panel.

<mat-expansion-panel #panel1>
<mat-expansion-header> <span>"Write a Response"</span> </mat-expansion-header>
<quill-editor [ngModel]="htmlText" (onContentChanged)="onContentChanged($event)" placeholder="placeholder"></quill-editor>
</mat-expansion-panel>

I tried autofocus, cdkFocusInitial, (focus)="myMethod()", still not working. Can someone help?

Thanks.

code
  • 11
  • 5

1 Answers1

0

To achieve this you will have to use @ViewChild.

First Add an id to the quil-editor - #editor

<mat-expansion-panel #panel1>
<mat-expansion-header> <span>"Write a Response"</span> </mat-expansion-header>
<quill-editor #editor [ngModel]="htmlText" (onContentChanged)="onContentChanged($event)" placeholder="placeholder"></quill-editor>
</mat-expansion-panel>

Then go over to the ts file and import ViewChild and AfterViewInit from angular/core. Then

export class ComponentName implement AfterViewInit{
@ViewChild('editor') editorElementRef : ElementRef;

  ngAfterViewInit(){
    this.editorElementRef.nativeElement.focus();
  }
}

So the above code, moves the focus to the editor once the view is initialized.

nXn
  • 904
  • 6
  • 13
  • Tried this, its working, but not as expected. It focuses the quill editor once and the focus goes back to the expansion panel. So I am not able to directly start typing in the editor. – code Jun 29 '20 at 12:32