fix: prevent dialog from closing when selecting elements from the dialog

closes #129
ngneat · Dec 2, 2024 · 54908f2 · 54908f2
1 parent 40c8f52
commit 54908f2
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git a/libs/dialog/src/lib/dialog.component.ts b/libs/dialog/src/lib/dialog.component.ts
@@ -145,7 +145,10 @@ export class DialogComponent implements OnInit, OnDestroy {
         filter(({ key }) => key === 'Escape'),
         map(() => closeConfig.escape),
       ),
-      backdropClick$.pipe(map(() => closeConfig.backdrop)),
+      backdropClick$.pipe(
+        filter(() => this.document.getSelection()?.toString() === ''),
+        map(() => closeConfig.backdrop),
+      ),
     )
       .pipe(
         takeUntil(this.destroy$),

diff --git a/libs/dialog/src/lib/specs/dialog.component.spec.ts b/libs/dialog/src/lib/specs/dialog.component.spec.ts
@@ -94,8 +94,17 @@ describe('DialogComponent', () => {
       expect(spectator.query('.ngneat-dialog-backdrop')).toBeTruthy();
     });
 
+    it('should not close when text is selected', () => {
+      const { close } = spectator.inject(InternalDialogRef);
+      spyOn(document, 'getSelection').and.returnValue({ toString: () => 'selected text' } as Selection);
+
+      spectator.dispatchMouseEvent('.ngneat-dialog-backdrop', 'click');
+      expect(close).not.toHaveBeenCalled();
+    });
+
     it('backdropClick$ should point to element', () => {
       let backdropClicked = false;
+      spyOn(document, 'getSelection').and.returnValue({ toString: () => '' } as Selection);
       spectator.inject(InternalDialogRef).backdropClick$.subscribe({
         next: () => (backdropClicked = true),
       });