fix(lib): nested viewMode templateRef on single click

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

@@ -9,10 +9,9 @@ import {
   OnInit,
   Output,
   TemplateRef,
-  ViewChild,
 } from '@angular/core';
 import { fromEvent, Observable, Subject, Subscription } from 'rxjs';
-import { filter, switchMapTo, take, takeUntil } from 'rxjs/operators';
+import { filter, skip, switchMapTo, take, takeUntil } from 'rxjs/operators';
 import { ViewModeDirective } from './directives/view-mode.directive';
 import { EditModeDirective } from './directives/edit-mode.directive';
 import { EDITABLE_CONFIG, EditableConfig } from './editable.config';
@@ -33,8 +32,6 @@ export class EditableComponent implements OnInit, OnDestroy {
   @ContentChild(ViewModeDirective) viewModeTpl: ViewModeDirective;
   @ContentChild(EditModeDirective) editModeTpl: EditModeDirective;
 
-  @ViewChild('input') input: ElementRef;
-
   private mode: Mode = 'view';
   private readonly editMode: Subject<boolean> = new Subject<boolean>();
   private readonly editMode$: Observable<boolean> = this.editMode.asObservable();
@@ -77,6 +74,7 @@ export class EditableComponent implements OnInit, OnDestroy {
 
   private handleEditMode(): void {
     const clickOutside$ = fromEvent(document, this.closeBindingEvent).pipe(
+      skip(this.openBindingEvent === 'click' ? 1 : 0),
       filter(({ target }) => this.element.contains(target) === false),
       take(1)
     );

src/app/app.component.html

@@ -241,7 +241,8 @@ <h4>Table example</h4>
             (cancel)="cancel(index, 'isActive')"
           >
             <ng-template viewMode>
-              {{ account.isActive }}
+              <!-- nested value for testing purposes -->
+              <span>{{ account.isActive }}</span>
             </ng-template>
             <ng-template editMode>
               <input placeholder="isActive" type="checkbox" [formControl]="getControl(index, 'isActive')" />