Troubleshooting: Unable to Trigger Click Events Outside Angular Component

Question

Troubleshooting: Unable to Trigger Click Events Outside Angular Component

Check out the code I've put together on Stackblitz. Here, you'll find my custom component that allows for toggling between two ng-content elements based on click events.


        import {Component, ElementRef, EventEmitter, OnDestroy, OnInit, Output} from '@angular/core';
        import {fromEvent, Subject} from "rxjs";
        import {untilDestroyed} from "ngx-take-until-destroy";
        import {filter, switchMapTo, take} from "rxjs/operators";
        
        @Component({
            selector: 'app-editable-inplace',
            templateUrl: './editable-inplace.component.html',
            styleUrls: ['./editable-inplace.component.css']
        })
        export class EditableInplaceComponent implements OnInit, OnDestroy {
        
            @Output() update = new EventEmitter();
            mode: 'view' | 'edit' = 'view';
            editMode = new Subject();
            editMode$ = this.editMode.asObservable();
        
            // Remaining code goes here...

Template:


        <div *ngIf="mode==='view'" >
            <ng-content select="[view]"></ng-content>
        </div>
        <div *ngIf="mode==='edit'" >
            <ng-content select="[edit]"></ng-content>
        </div>

Usage:


        <app-editable-inplace >
            <div view>
                <h3>Click to edit [not working :-( ]</h3>

            </div>
            <div edit>

                        <input placeholder="Click to edit"   >

            </div>
        </app-editable-inplace>

However, I'm facing some issues such as the 'clickOutside$' triggering instantly when clicking on the view element. Additionally, the line

this.element.contains(target) === false

doesn't seem to work as expected. Even though the console shows that the host contains the clicked item, it always registers as a click outside (a bit confusing).

https://i.sstatic.net/P6PZR.png

angular typescript rxjs

Answer 1

Answer №1

When it comes to events in the browser, many of them follow a process called bubbling, with the click event being one such example. This means that the event travels from the target element upwards. If you have registered an event with the same name higher up in the hierarchy, it will be triggered regardless of what happens in the target handler.

 document  =====================================================>  outsideHandler
  body                                                          /\
    ....                                                        ||  
    <app-editable-inplace>                                   bubbling
      <div view>                                                /\
        <h3>Click to edit [not working :-( ]</h3> <===== target || viewClickHandler
      </div>
      ...
    </app-editable-inplace>

As a result, the clickOutside$ event is triggered immediately.

To address this issue, there are several solutions:

1) The simplest approach is to use event.stopPropagation() to prevent further event bubbling.

private viewModeHandler() {
    fromEvent(this.element, 'click').pipe(
        untilDestroyed(this)
    ).subscribe((e: any) => {
        console.log('clicked inside');
        e.stopPropagation(); <==================== add this

2) Since both handlers involve the same bubbling event, you can set a flag to avoid processing it in the top handler.

 private viewModeHandler() {
    fromEvent(this.element, 'click').pipe(
        untilDestroyed(this)
    ).subscribe((e: any) => {
        console.log('clicked inside');
        e.fromInside = true;


 ...
 const clickOutside$ = fromEvent(document, 'click').pipe(
  filter((e: any) => {
    return !e.fromInside && this.element.contains(e.target) === false
  }),

3) Another option is to capture the click event during the capture phase:

fromEvent(this.element, 'click', { capture: true }).pipe(

... 

const clickOutside$ = fromEvent(document, 'click', { capture: true })

Answer 2

When it comes to events in the browser, many of them follow a process called bubbling, with the click event being one such example. This means that the event travels from the target element upwards. If you have registered an event with the same name higher up in the hierarchy, it will be triggered regardless of what happens in the target handler.

 document  =====================================================>  outsideHandler
  body                                                          /\
    ....                                                        ||  
    <app-editable-inplace>                                   bubbling
      <div view>                                                /\
        <h3>Click to edit [not working :-( ]</h3> <===== target || viewClickHandler
      </div>
      ...
    </app-editable-inplace>

As a result, the clickOutside$ event is triggered immediately.

To address this issue, there are several solutions:

1) The simplest approach is to use event.stopPropagation() to prevent further event bubbling.

private viewModeHandler() {
    fromEvent(this.element, 'click').pipe(
        untilDestroyed(this)
    ).subscribe((e: any) => {
        console.log('clicked inside');
        e.stopPropagation(); <==================== add this

2) Since both handlers involve the same bubbling event, you can set a flag to avoid processing it in the top handler.

 private viewModeHandler() {
    fromEvent(this.element, 'click').pipe(
        untilDestroyed(this)
    ).subscribe((e: any) => {
        console.log('clicked inside');
        e.fromInside = true;


 ...
 const clickOutside$ = fromEvent(document, 'click').pipe(
  filter((e: any) => {
    return !e.fromInside && this.element.contains(e.target) === false
  }),

3) Another option is to capture the click event during the capture phase:

fromEvent(this.element, 'click', { capture: true }).pipe(

... 

const clickOutside$ = fromEvent(document, 'click', { capture: true })

Answer 3

Answer №2

The reason for the counter increment when clicking outside is because the click event has been bound to the entire document.

To resolve this issue, you can control the click event and prevent it from propagating further.

If you want to learn more about events in JavaScript, check out this helpful article: https://medium.com/@vsvaibhav2016/event-bubbling-and-event-capturing-in-javascript-6ff38bec30e

Answer 4

The reason for the counter increment when clicking outside is because the click event has been bound to the entire document.

To resolve this issue, you can control the click event and prevent it from propagating further.

If you want to learn more about events in JavaScript, check out this helpful article: https://medium.com/@vsvaibhav2016/event-bubbling-and-event-capturing-in-javascript-6ff38bec30e

Troubleshooting: Unable to Trigger Click Events Outside Angular Component

Answer №1

Answer №2

Similar questions

Decorators in Angular 9 do not have the capability to support function expressions

Concerns about unchanging Behavior Subject affecting Ionic 4 interface

Encountering a 'ng serve' error while trying to include a new SCSS style in an

Exploring the functionality of the Aria role attribute within Angular 2

Mongodb's adaptive criteria for email notifications

Dealing with compilation errors in TypeScript

Conflicting TypeScript errors arise from a clash between React version 16.14 and @types/hoist-non-react-statics 3.3.1

Can you explain the significance of using square brackets in the typescript enum declaration?

Scoped variable in Typescript producing a generated Javascript file

Creating an Ionic 3 canvas using a provider

What kind of Input field is being provided as an argument to a TypeScript function?

tips on how to shade a column in the material data table according to a specific condition when the table is first loaded

How to convert the return value of a function into a string in Angular 2

Steps for Properly Defining Next.js getServerSideProps as a Function Declaration

Decorator used in identifying the superclass in Typescript

The importance of subscribing in service calls: Exploring Angular 2/4

Load Order Possibly Disrupted by Arrival of Barrel Imports

"Unlocking the potential: Exploring the power of keyof with

Exploring Angular observables: Tips for gathering specific fields from a nested array within an object into a new array

Angular Material: Enhanced search input with a universal clear button