Fix event listener binding

opf · Feb 5, 2025 · fd64314 · fd64314
1 parent 2e92b26
commit fd64314
Show file tree

Hide file tree

Showing 8 changed files with 35 additions and 19 deletions.
diff --git a/frontend/src/app/features/work-packages/components/wp-reminder-modal/wp-reminder.modal.ts b/frontend/src/app/features/work-packages/components/wp-reminder-modal/wp-reminder.modal.ts
@@ -43,6 +43,8 @@ export class WorkPackageReminderModalComponent extends OpModalComponent implemen
 
   public title$:Observable<string>;
 
+  private boundListener = this.turboSubmitEndListener.bind(this);
+
   constructor(
     @Inject(OpModalLocalsToken) public locals:OpModalLocalsMap,
     readonly cdRef:ChangeDetectorRef,
@@ -69,13 +71,13 @@ export class WorkPackageReminderModalComponent extends OpModalComponent implemen
 
   ngAfterViewInit() {
     // Use event delegation on a parent element that won't be re-rendered
-    this.elementRef.nativeElement.addEventListener('turbo:submit-end', this.turboSubmitEndListener.bind(this));
+    this.elementRef.nativeElement.addEventListener('turbo:submit-end', this.boundListener);
   }
 
   ngOnDestroy() {
     super.ngOnDestroy();
 
-    this.elementRef.nativeElement.removeEventListener('turbo:submit-end', this.turboSubmitEndListener.bind(this));
+    this.elementRef.nativeElement.removeEventListener('turbo:submit-end', this.boundListener);
   }
 
   onClose():boolean {

diff --git a/...rc/app/shared/components/fields/edit/field-types/progress-popover-edit-field.component.ts b/...rc/app/shared/components/fields/edit/field-types/progress-popover-edit-field.component.ts
@@ -79,6 +79,8 @@ export class ProgressPopoverEditFieldComponent extends ProgressEditFieldComponen
 
   opened = false;
 
+  private boundListener = this.contextBasedListener.bind(this);
+
   constructor(
     readonly I18n:I18nService,
     readonly elementRef:ElementRef,
@@ -111,7 +113,7 @@ export class ProgressPopoverEditFieldComponent extends ProgressEditFieldComponen
     this
       .frameElement
       .nativeElement
-      .addEventListener('turbo:submit-end', this.contextBasedListener.bind(this));
+      .addEventListener('turbo:submit-end', this.boundListener);
   }
 
   ngOnDestroy() {
@@ -120,7 +122,7 @@ export class ProgressPopoverEditFieldComponent extends ProgressEditFieldComponen
     this
       .frameElement
       .nativeElement
-      .removeEventListener('turbo:submit-end', this.contextBasedListener.bind(this));
+      .removeEventListener('turbo:submit-end', this.boundListener);
   }
 
   public get asHoursOrPercent():string {

diff --git a/frontend/src/stimulus/controllers/disable-when-checked.controller.ts b/frontend/src/stimulus/controllers/disable-when-checked.controller.ts
@@ -13,12 +13,14 @@ export default class OpDisableWhenCheckedController extends ApplicationControlle
 
   declare readonly effectTargets:HTMLInputElement[];
 
+  private boundListener = this.toggleDisabled.bind(this);
+
   causeTargetConnected(target:HTMLElement) {
-    target.addEventListener('change', this.toggleDisabled.bind(this));
+    target.addEventListener('change', this.boundListener);
   }
 
   causeTargetDisconnected(target:HTMLElement) {
-    target.removeEventListener('change', this.toggleDisabled.bind(this));
+    target.removeEventListener('change', this.boundListener);
   }
 
   private toggleDisabled(evt:InputEvent):void {

diff --git a/frontend/src/stimulus/controllers/dynamic/filter/filters-form.controller.ts b/frontend/src/stimulus/controllers/dynamic/filter/filters-form.controller.ts
@@ -88,9 +88,11 @@ export default class FiltersFormController extends Controller {
   declare performTurboRequestsValue:boolean;
   declare readonly clearButtonIdValue:string;
 
+  private boundListener = this.sendForm.bind(this);
+
   initialize() {
     // Initialize runs anytime an element with a controller connected to the DOM for the first time
-    this.sendForm = debounce(this.sendForm.bind(this), 300);
+    this.sendForm = debounce(this.boundListener, 300);
     this.autoReloadTargets = [
       ...this.simpleValueTargets,
       ...this.operatorTargets,
@@ -113,9 +115,9 @@ export default class FiltersFormController extends Controller {
     if (this.performTurboRequestsValue) {
       this.autoReloadTargets.forEach((target) => {
         if (target instanceof HTMLInputElement) {
-          target.addEventListener('input', this.sendForm.bind(this));
+          target.addEventListener('input', this.boundListener);
         } else {
-          target.addEventListener('change', this.sendForm.bind(this));
+          target.addEventListener('change', this.boundListener);
         }
       });
     }
@@ -130,9 +132,9 @@ export default class FiltersFormController extends Controller {
     if (this.performTurboRequestsValue) {
       this.autoReloadTargets.forEach((target) => {
         if (target instanceof HTMLInputElement) {
-          target.removeEventListener('input', this.sendForm.bind(this));
+          target.removeEventListener('input', this.boundListener);
         } else {
-          target.removeEventListener('change', this.sendForm.bind(this));
+          target.removeEventListener('change', this.boundListener);
         }
       });
     }

diff --git a/frontend/src/stimulus/controllers/dynamic/projects/zen-mode.controller.ts b/frontend/src/stimulus/controllers/dynamic/projects/zen-mode.controller.ts
@@ -6,13 +6,15 @@ export default class OpProjectsZenModeController extends ApplicationController {
 
   declare readonly buttonTarget:HTMLElement;
 
+  private boundHandler = this.fullscreenChangeEventHandler.bind(this) ;
+
   connect() {
-    document.addEventListener('fullscreenchange', this.fullscreenChangeEventHandler.bind(this));
+    document.addEventListener('fullscreenchange', this.boundHandler);
   }
 
   disconnect() {
     super.disconnect();
-    document.removeEventListener('fullscreenchange', this.fullscreenChangeEventHandler.bind(this));
+    document.removeEventListener('fullscreenchange', this.boundHandler);
   }
 
   fullscreenChangeEventHandler() {

diff --git a/frontend/src/stimulus/controllers/dynamic/shares/user-selected.controller.ts b/frontend/src/stimulus/controllers/dynamic/shares/user-selected.controller.ts
@@ -43,12 +43,14 @@ export default class UserSelectedController extends Controller {
 
   private selectedValues:IUserAutocompleteItem[] = [];
 
+  private boundListener = this.handleValueSelected.bind(this);
+
   connect() {
-    this.autocompleterElement.addEventListener('change', this.handleValueSelected.bind(this));
+    this.autocompleterElement.addEventListener('change', this.boundListener);
   }
 
   disconnect() {
-    this.autocompleterElement.removeEventListener('change', this.handleValueSelected.bind(this));
+    this.autocompleterElement.removeEventListener('change', this.boundListener);
   }
 
   ensureUsersSelected(evt:CustomEvent):void {

diff --git a/frontend/src/stimulus/controllers/show-when-checked.controller.ts b/frontend/src/stimulus/controllers/show-when-checked.controller.ts
@@ -13,12 +13,14 @@ export default class OpShowWhenCheckedController extends ApplicationController {
 
   declare readonly effectTargets:HTMLInputElement[];
 
+  private boundListener = this.toggleDisabled.bind(this);
+
   causeTargetConnected(target:HTMLElement) {
-    target.addEventListener('change', this.toggleDisabled.bind(this));
+    target.addEventListener('change', this.boundListener);
   }
 
   causeTargetDisconnected(target:HTMLElement) {
-    target.removeEventListener('change', this.toggleDisabled.bind(this));
+    target.removeEventListener('change', this.boundListener);
   }
 
   private toggleDisabled(evt:InputEvent):void {

diff --git a/frontend/src/stimulus/controllers/show-when-value-selected.controller.ts b/frontend/src/stimulus/controllers/show-when-value-selected.controller.ts
@@ -5,12 +5,14 @@ export default class OpShowWhenValueSelectedController extends ApplicationContro
 
   declare readonly effectTargets:HTMLInputElement[];
 
+  private boundListener = this.toggleDisabled.bind(this);
+
   causeTargetConnected(target:HTMLElement) {
-    target.addEventListener('change', this.toggleDisabled.bind(this));
+    target.addEventListener('change', this.boundListener);
   }
 
   causeTargetDisconnected(target:HTMLElement) {
-    target.removeEventListener('change', this.toggleDisabled.bind(this));
+    target.removeEventListener('change', this.boundListener);
   }
 
   private toggleDisabled(evt:InputEvent):void {