fix(lib): handle event propagation

projects/ngneat/edit-in-place/src/lib/editable.component.ts

@@ -11,7 +11,7 @@ import {
   Output,
 } from '@angular/core';
 import { BehaviorSubject, fromEvent, Observable, Subject, Subscription } from 'rxjs';
-import { filter, switchMapTo, take, takeUntil, tap, withLatestFrom } from 'rxjs/operators';
+import { filter, skip, switchMapTo, take, takeUntil, withLatestFrom } from 'rxjs/operators';
 import { ViewModeDirective } from './directives/view-mode.directive';
 import { EditModeDirective } from './directives/edit-mode.directive';
 import { EDITABLE_CONFIG, EditableConfig } from './editable.config';
@@ -58,23 +58,27 @@ export class EditableComponent implements OnInit, OnDestroy {
   private handleViewMode(): void {
     this.viewHandler = fromEvent(this.element, this.openBindingEvent)
       .pipe(
-        tap((e: Event) => e.stopPropagation()),
+        takeUntil(this.destroy$),
         withLatestFrom(this.editMode$),
-        filter(([_, editMode]) => !editMode),
-        takeUntil(this.destroy$)
+        filter(([_, editMode]) => !editMode)
       )
       .subscribe(() => this.displayEditMode());
   }
 
   private handleEditMode(): void {
     const clickOutside$ = fromEvent(document, this.closeBindingEvent).pipe(
+      /*
+      skip the first propagated event if there is a nested node in the viewMode templateRef
+      so it doesn't trigger this eventListener when switching to editMode
+       */
+      skip(this.openBindingEvent === this.closeBindingEvent ? 1 : 0),
       filter(({ target }) => this.element.contains(target) === false),
       take(1)
     );
 
     this.editHandler = this.editMode$
       .pipe(
-        filter((editMode) => editMode),
+        filter(editMode => editMode),
         switchMapTo(clickOutside$),
         takeUntil(this.destroy$)
       )