Issue: Scroll Event Propagation Conflict with CodeMirror
Description:
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>
</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
if(ref){
this.destroyEditor()
this.initializeEditor()
}
}
initializeEditor() {
// CodeMirror initialization code...
}
updateEditor(){
// CodeMirror update code...
}
destroyEditor() {
// CodeMirror destruction code...
}
Steps to Reproduce:
- Go to the code container.
- Type until it get a vertical scroll.
- Remove a line from the code using CodeMirror.
- 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!