fix: stop click propagation by default (#47)

This is typically the expected behavior. Expanding/collapsing nodes should not trigger event handling in parent components in most cases. Overridable if needed.

Author: MichaelDoyle

projects/ngx-json-treeview/src/lib/directives/stop-click-propagation.directive.spec.ts

@@ -0,0 +1,61 @@
+import { Component } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { StopClickPropagationDirective } from './stop-click-propagation.directive';
+
+@Component({
+  standalone: true,
+  imports: [StopClickPropagationDirective],
+  template: `
+    <div (click)="parentClicked()">
+      <div [ngxJtStopClickPropagation]="enabled">
+        <span (click)="childClicked()">Click Me</span>
+      </div>
+    </div>
+  `,
+})
+class TestComponent {
+  enabled = true;
+  parentClicked() {}
+  childClicked() {}
+}
+
+describe('StopClickPropagationDirective', () => {
+  let fixture: ComponentFixture<TestComponent>;
+  let component: TestComponent;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TestComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TestComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should stop click propagation when enabled', () => {
+    const parentSpy = spyOn(component, 'parentClicked');
+    const childSpy = spyOn(component, 'childClicked');
+
+    const clickableSpan = fixture.debugElement.query(By.css('span'));
+    clickableSpan.nativeElement.click();
+
+    expect(childSpy).toHaveBeenCalled();
+    expect(parentSpy).not.toHaveBeenCalled();
+  });
+
+  it('should not stop click propagation when disabled', () => {
+    component.enabled = false;
+    fixture.detectChanges();
+
+    const parentSpy = spyOn(component, 'parentClicked');
+    const childSpy = spyOn(component, 'childClicked');
+
+    const clickableSpan = fixture.debugElement.query(By.css('span'));
+    clickableSpan.nativeElement.click();
+
+    expect(childSpy).toHaveBeenCalled();
+    expect(parentSpy).toHaveBeenCalled();
+  });
+});

projects/ngx-json-treeview/src/lib/directives/stop-click-propagation.directive.ts

@@ -0,0 +1,16 @@
+import { Directive, HostListener, input } from '@angular/core';
+
+@Directive({
+  selector: '[ngxJtStopClickPropagation]',
+  standalone: true,
+})
+export class StopClickPropagationDirective {
+  enabled = input<boolean>(true, { alias: 'ngxJtStopClickPropagation' });
+
+  @HostListener('click', ['$event'])
+  onClick(event: Event): void {
+    if (this.enabled()) {
+      event.stopPropagation();
+    }
+  }
+}

projects/ngx-json-treeview/src/lib/ngx-json-treeview/ngx-json-treeview.component.html

@@ -8,6 +8,7 @@
         class="segment-primitive"
         [class.clickable]="isClickablePrimitive()"
         (click)="onPrimitiveClick($event)"
+        [ngxJtStopClickPropagation]="stopClickPropagation()"
         [disabled]="!isClickablePrimitive()">
         {{ asString() }}
       </button>
@@ -45,6 +46,7 @@
             [class.expandable]="expandable"
             [class.expanded]="segment.expanded"
             (click)="toggle(segment)"
+            [ngxJtStopClickPropagation]="stopClickPropagation()"
             [disabled]="!expandable">
             @if (expandable) {
               <div class="toggler"></div>
@@ -72,6 +74,7 @@
               [class.segment-value]="!expandable"
               [class.clickable]="clickableValue"
               (click)="onValueClickHandler(segment, $event)"
+              [ngxJtStopClickPropagation]="stopClickPropagation()"
               [disabled]="!clickableValue">
               {{ segment.description }}
             </button>
@@ -91,6 +94,7 @@
               [enableClickableValues]="enableClickableValues()"
               [valueClickHandlers]="valueClickHandlers()"
               [isClickableValue]="isClickableValue()"
+              [stopClickPropagation]="stopClickPropagation()"
               (onValueClick)="onValueClickHandler($event)"
               [_parent]="segment"
               [_currentDepth]="_currentDepth() + 1" />

projects/ngx-json-treeview/src/lib/ngx-json-treeview/ngx-json-treeview.component.ts

@@ -1,4 +1,5 @@
 import { Component, computed, inject, input, output } from '@angular/core';
+import { StopClickPropagationDirective } from '../directives/stop-click-propagation.directive';
 import { VALUE_CLICK_HANDLERS } from '../handlers';
 import { ID_GENERATOR } from '../services/id-generator';
 import { IsClickableValueFn, Segment, ValueClickHandler } from '../types';
@@ -10,7 +11,7 @@ import { decycle, previewString } from '../util';
  */
 @Component({
   selector: 'ngx-json-treeview',
-  imports: [],
+  imports: [StopClickPropagationDirective],
   templateUrl: './ngx-json-treeview.component.html',
   styleUrls: ['./ngx-json-treeview.component.scss'],
 })
@@ -52,6 +53,19 @@ export class NgxJsonTreeviewComponent {
    */
   enableClickableValues = input<boolean>(false);
 
+  /**
+   * A flag to control whether click events on nodes propagate up the DOM tree.
+   *
+   * By default, click events are stopped from propagating. This is useful when
+   * the tree view is embedded within other clickable elements to avoid
+   * unintended side effects.
+   *
+   * Set to `false` to allow events to propagate.
+   *
+   * @default true
+   */
+  stopClickPropagation = input<boolean>(true);
+
   /**
    * @deprecated Use `valueClickHandlers` instead. This input will be removed
    * in a future version.