Open
Description
Describe the Bug
After destroying the form viewer some event listeners remain attached to the document. When I import a form schema with the form viewer two event listeners (that cause some problems for me) are added to the document: mousedown and focus.
I am using the form viewer together with Angular and PrimeNG and I am facing some problems when the above mentioned event listeners stay attached globally to the document. I see no reason why they should stay attached after destroying the formviewer.
<div #viewer></div>
export class BpmnIoFormViewerComponent implements OnInit, OnDestroy {
@ViewChild('viewer', { static: true }) private viewerRef!: ElementRef;
@Input() schema: Schema;
private formViewer: Form = new Form({});
warnings: string[] = [];
ngOnInit(): void {
this.formViewer.attachTo(this.viewerRef.nativeElement);
this.importFormSchema();
}
private importFormSchema(): void {
this.formViewer
.importSchema(this.schema)
.then((result) => {
this.warnings = result.warnings;
})
.catch((error) => {
console.log(error);
});
}
ngOnDestroy(): void {
if (this.formViewer) {
this.formViewer.detach();
this.formViewer.destroy(); // Event listeners remain attached to the document
}
if (this.viewerRef?.nativeElement) {
this.viewerRef.nativeElement.innerHTML = '';
}
}
}
Maybe there is a way to prevent the listeners from being added to the whole document (only to the container element).
Steps to Reproduce
- Use the form viewer in Angular and import a form
- Use the PrimeNG table component (doesn't matter if you change routes or use it on the same page)
- Try to catch the onRowSelect event from the table component (will not be fired anymore with the two event listeners attached to the document)
Expected Behavior
After destroying the form viewer component every event listener that got added should be removed.
Environment
- Angular 18.2
- bpmn-io/form-js 1.14
- PrimeNG 17.18.9