diff --git a/lib/core/src/lib/datatable/directives/resizable/resizable.directive.ts b/lib/core/src/lib/datatable/directives/resizable/resizable.directive.ts index 70cb4d7baa..06d168a006 100644 --- a/lib/core/src/lib/datatable/directives/resizable/resizable.directive.ts +++ b/lib/core/src/lib/datatable/directives/resizable/resizable.directive.ts @@ -131,7 +131,10 @@ export class ResizableDirective implements OnInit, OnDestroy { .pipe(filter(() => !!this.currentRect)); mouseDrag - .pipe(map(({ clientX }) => this.getNewBoundingRectangle(this.startingRect, clientX + this.coverPadding))) + .pipe( + map(({ clientX }) => this.getNewBoundingRectangle(this.startingRect, clientX + this.coverPadding)), + takeUntilDestroyed(this.destroyRef) + ) .subscribe((rectangle: BoundingRectangle) => { if (this.resizing.observers.length > 0) { this.zone.run(() => { diff --git a/lib/core/src/lib/datatable/directives/resizable/resize-handle.directive.spec.ts b/lib/core/src/lib/datatable/directives/resizable/resize-handle.directive.spec.ts index 793b15453a..69ea673f29 100644 --- a/lib/core/src/lib/datatable/directives/resizable/resize-handle.directive.spec.ts +++ b/lib/core/src/lib/datatable/directives/resizable/resize-handle.directive.spec.ts @@ -131,6 +131,28 @@ describe('ResizeHandleDirective', () => { expect(renderer.listen).toHaveBeenCalledWith(element.nativeElement, 'mousemove', jasmine.any(Function)); expect(renderer.listen).toHaveBeenCalledWith('document', 'mouseup', jasmine.any(Function)); }); + + it('should unregister previous mouseup listener before registering a new one on repeated mousedown', () => { + const firstUnlistenMouseUp = jasmine.createSpy('firstUnlistenMouseUp'); + const secondUnlistenMouseUp = jasmine.createSpy('secondUnlistenMouseUp'); + let mouseUpCallCount = 0; + + renderer.listen.and.callFake((_target: any, eventName: string, _callback: (event: MouseEvent) => void) => { + if (eventName === 'mouseup') { + mouseUpCallCount++; + return mouseUpCallCount === 1 ? firstUnlistenMouseUp : secondUnlistenMouseUp; + } + return () => {}; + }); + + const mouseEvent = new MouseEvent('mousedown', { cancelable: true }); + + mousedownCallback(mouseEvent); + expect(firstUnlistenMouseUp).not.toHaveBeenCalled(); + + mousedownCallback(mouseEvent); + expect(firstUnlistenMouseUp).toHaveBeenCalled(); + }); }); describe('keyboard resizing', () => { diff --git a/lib/core/src/lib/datatable/directives/resizable/resize-handle.directive.ts b/lib/core/src/lib/datatable/directives/resizable/resize-handle.directive.ts index 726b0a1531..7ed69ca8cb 100644 --- a/lib/core/src/lib/datatable/directives/resizable/resize-handle.directive.ts +++ b/lib/core/src/lib/datatable/directives/resizable/resize-handle.directive.ts @@ -86,6 +86,7 @@ export class ResizeHandleDirective implements OnInit, OnDestroy { }); } + this.unlistenMouseUp?.(); this.unlistenMouseUp = this.renderer.listen('document', 'mouseup', (mouseUpEvent: MouseEvent) => { this.onMouseup(mouseUpEvent); }); @@ -96,7 +97,8 @@ export class ResizeHandleDirective implements OnInit, OnDestroy { private onMouseup(event: MouseEvent): void { this.unlistenMouseMove?.(); this.unlistenMouseMove = undefined; - this.unlistenMouseUp(); + this.unlistenMouseUp?.(); + this.unlistenMouseUp = undefined; this.resizableContainer.mouseup.next(event); }