fix: include page blur in end events for drag (#507)

Akxe · SanderElias · Jefiozie · web-flow · commit f7af815aaa5f · 2025-05-19T13:08:28.000Z
Co-authored-by: Sander Elias &lt;SanderElias@users.noreply.github.com&gt;
Co-authored-by: Jeffrey Bosch &lt;Jefiozie@users.noreply.github.com&gt;
diff --git a/projects/angular-split/src/lib/split/split.component.ts b/projects/angular-split/src/lib/split/split.component.ts
@@ -19,7 +19,20 @@ import {
 } from '@angular/core'
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop'
 import type { SplitAreaComponent } from '../split-area/split-area.component'
-import { Subject, filter, fromEvent, map, pairwise, skipWhile, startWith, switchMap, take, takeUntil, tap } from 'rxjs'
+import {
+  Subject,
+  filter,
+  fromEvent,
+  map,
+  merge,
+  pairwise,
+  skipWhile,
+  startWith,
+  switchMap,
+  take,
+  takeUntil,
+  tap,
+} from 'rxjs'
 import {
   ClientPoint,
   createClassesString,
@@ -197,7 +210,7 @@ export class SplitComponent {
               ),
             ),
             take(1),
-            takeUntil(fromMouseUpEvent(this.document, true)),
+            takeUntil(merge(fromMouseUpEvent(this.document, true), fromEvent(this.document, 'blur'))),
             tap(() => {
               this.ngZone.run(() => {
                 this.dragStart.emit(this.createDragInteractionEvent(mouseDownContext.gutterIndex))
