ngx-Codemirror cursor is not working correctly-Angular 8

Question

I have implemented ngX-CodeMirror in my angular project. I have added the code editor inside an angular material modal. It works fine I'm not able to move the cursor so that I can click on any text. I am able to click on some text but not where we intend to.

I have added this issue in stackblitz : Code Mirror Cursor Issue

This is s snippet from my component.html file

<ngx-codemirror
 #codeMirror
 [options]="codeMirrorOptions"
 [(ngModel)]="codeObj">
</ngx-codemirror>

And in component.ts,

import { Component, OnInit, ViewChild, ElementRef, Input } from "@angular/core";
import { CodemirrorComponent } from "@ctrl/ngx-codemirror";

export class CodeEditorComponent implements OnInit {
  @Input()
  configs: any;
  testData: any;

  @ViewChild("textArea") textArea: ElementRef; 

  codeMirrorOptions: any = {
    theme: "idea",
    mode: "application/json",
    lineNumbers: true,
    autoRefresh: true
  };

  codeObj: any;
  constructor() {}

  ngOnInit(): void {
    this.codeObj = JSON.stringify(this.configs, undefined, 2);
  }
}

I'm not sure why this happened or if we need to provide any specific options to see mouse cursor. I have seen a related query for this in codeMirrorDiscussionForum but couldn't find a solution yet.

Please do help me solve this issue by referring the stackblitz link.

Answer 1

Yes, I would also wait till the modal is open because the size of code mirror area is being changed over Angular material animation:

dialog.component.ts

export class ExampleModalComponent implements OnInit {
  opened$ = this.dialogRef.afterOpened().pipe(mapTo(true));

dialog.component.html

<ngx-codemirror *ngIf="opened$ | async else loading"
....


<ng-template #loading>Loading...</ng-template>

Forked Stackblitz

Another solution is to disable animation.