removeEventListener doesn't work as expected

Question

I've an undesired effect when applying and removing event listeners.

I found relative issues online. I tried to apply what I found but I still got the same issue. Then I found this: https://dev.to/marcostreng/how-to-really-remove-eventlisteners-in-react-3och

I don't know if that can be the case. But I may think that it's a similar issue. Don't know actually. Let me show you my code:

component.ts

clearDateValue(listener: boolean): void {
    const handleKeyEvent = (event: KeyboardEvent) => {
      if (event.key !== 'Backspace')
        return;
      this.taskFormSetValue('date', null);
    };

    if (listener) {
      document.querySelector('.cdk-overlay-container').addEventListener('keyup', handleKeyEvent);
    } else {
      document.querySelector('.cdk-overlay-container').removeEventListener('keyup', handleKeyEvent);
    }
  }

component.html

<mat-form-field appearance="outline">
    <input #date formControlName="date" matInput [min]="minDate" [matDatepicker]="picker" (dateChange)="taskFormSetValue('date', $event.value)" class="d-none">
    <mat-datepicker-toggle matSuffix [for]="picker">
        <fa-icon *ngIf="!date.value" [icon]="dateIcon" matDatepickerToggleIcon></fa-icon>
        <span *ngIf="date.value" matDatepickerToggleIcon class="dateTextToggle font-size-12">
            {{ date.value | date:'dd MMM' }}
        </span>
    </mat-datepicker-toggle>
    <!-- THIS IS THE IMPORTANT SECTION OF THE CODE IN WHICH I IMPLEMENTED clearDateValue(listener) -->
    <mat-datepicker #picker (opened)="clearDateValue(true)" (closed)="clearDateValue(false)"></mat-datepicker>
</mat-form-field>

I logged in the console the toggler and it's working as expected. On Datepicker close, the toggler is false, so it should remove the listener. That's unfortunately doesn't help. I think the issue is in the removeEventListener() method. I don't know if it doesn't remove the event listener because the component is refreshed. But in the following video you can see what it happens when i click two datepickers (and activate the addEventListener method) and then I click 'delete' key. It deletes both values when it should delete only the latest: https://drive.google.com/file/d/1oDIK1nVCAFiiFly_Qv6RoPZi4Z6_sAhj/view

Answer 1

in your code every time you call your method a new handleKeyEvent function is created. to fix that place listener code outside of the method like this:

handleKeyEvent = (event: KeyboardEvent) => {
      if (event.key !== 'Backspace')
        return;
      this.taskFormSetValue('date', null);
    };
clearDateValue(listener: boolean): void {
    if (listener) {
      document.querySelector('.cdk-overlay-container').addEventListener('keyup', this.handleKeyEvent);
    } else {
      document.querySelector('.cdk-overlay-container').removeEventListener('keyup', this.handleKeyEvent);
    }
  }