CodeMirror Scroll Event Propagation Conflict in Angular Application

Issue: Scroll Event Propagation Conflict with CodeMirror


I am encountering an issue where the scroll event in CodeMirror is triggering the scroll event in the parent container. This problem occurs specifically when removing a line from the code container. Below, I have provided a detailed description of the relevant code and steps to reproduce the issue.

Code and Setup:

<div class="code-container" #codeContainer [class.error]="isErrorGeneration"  (scroll)="onScroll($event)" >

    <!-- editor -->
    <div  #codeEditor *ngIf="!isCodeLoader"  ></div>


.code-container {
    background-color: #141E24;
    width: 98%;
    height: 28vh;
    border-radius: 10px;
    margin-top: 1vh;
    color: #D1D1D1;
    padding: 9px;
    outline: none;
    position: relative;
    overflow-y: scroll;
@ViewChild('codeContainer') codeContainer: ElementRef;

@ViewChild('codeEditor') set codeEditorRef(ref: ElementRef<any>){

    this.codeEditor = ref

initializeEditor() {
    // CodeMirror initialization code...

    // CodeMirror update code...

destroyEditor() {
    // CodeMirror destruction code...

Steps to Reproduce:

  1. Go to the code container.
  2. Type until it get a vertical scroll.
  3. Remove a line from the code using CodeMirror.
  4. Observe that the scroll event in CodeMirror triggers the scroll event in the parent container.

Expected Behavior:

Removing a line in CodeMirror should not cause the scroll event in the parent container to trigger.

Additional Information:

  • Angular Version: 16
  • CodeMirror Version:6
  • Browser:chrome

steps taken:

  • Tried sttoping the event from propagating using stopPropogation and used preventdefault . but it has no effect.

Please let me know if further information is needed or if there are any specific details you would like to add. Your assistance in resolving this issue is greatly appreciated!

Did it actually scroll it to an inappropriate position?

If you can reproduce this without Angular, I could take a look.