refactor: remove currentTarget from dom-utils event handlers (@fehmer) (monkeytypegame#7270)

Author: fehmer

frontend/src/ts/elements/input-validation.ts

@@ -8,7 +8,7 @@ import {
 } from "@monkeytype/schemas/configs";
 import Config, { setConfig } from "../config";
 import * as Notifications from "../elements/notifications";
-import { ElementWithUtils } from "../utils/dom";
+import { DomUtilsEvent, ElementWithUtils } from "../utils/dom";
 
 export type ValidationResult = {
   status: "checking" | "success" | "failed" | "warning";
@@ -60,7 +60,7 @@ export function createInputEventHandler<T>(
   callback: (result: ValidationResult) => void,
   validation: Validation<T>,
   inputValueConvert?: (val: string) => T,
-): (e: Event) => Promise<void> {
+): (e: DomUtilsEvent) => Promise<void> {
   let callIsValid =
     validation.isValid !== undefined
       ? debounceIfNeeded(

frontend/src/ts/utils/dom.ts

@@ -105,6 +105,12 @@ type ElementWithValue =
   | HTMLTextAreaElement
   | HTMLSelectElement;
 
+export type DomUtilsEvent<T extends Event = Event> = Omit<T, "currentTarget">;
+
+type DomUtilsEventListenerOrEventListenerObject =
+  | { (evt: DomUtilsEvent): void }
+  | { handleEvent(object: DomUtilsEvent): void };
+
 export class ElementWithUtils<T extends HTMLElement = HTMLElement> {
   /**
    * The native dom element
@@ -238,19 +244,19 @@ export class ElementWithUtils<T extends HTMLElement = HTMLElement> {
    */
   on<K extends keyof HTMLElementEventMap>(
     event: K,
-    handler: (this: T, ev: HTMLElementEventMap[K]) => void,
+    handler: (this: T, ev: DomUtilsEvent<HTMLElementEventMap[K]>) => void,
   ): this;
-  on(event: string, handler: EventListenerOrEventListenerObject): this;
+  on(event: string, handler: DomUtilsEventListenerOrEventListenerObject): this;
   on(
     event: keyof HTMLElementEventMap | string,
     handler:
-      | EventListenerOrEventListenerObject
-      | ((this: T, ev: Event) => void),
+      | DomUtilsEventListenerOrEventListenerObject
+      | ((this: T, ev: DomUtilsEvent) => void),
   ): this {
     // this type was some AI magic but if it works it works
     this.native.addEventListener(
       event,
-      handler as EventListenerOrEventListenerObject,
+      handler as DomUtilsEventListenerOrEventListenerObject,
     );
     return this;
   }
@@ -262,19 +268,22 @@ export class ElementWithUtils<T extends HTMLElement = HTMLElement> {
   onChild<K extends keyof HTMLElementEventMap>(
     event: K,
     query: string,
-    handler: (this: HTMLElement, ev: HTMLElementEventMap[K]) => void,
+    handler: (
+      this: HTMLElement,
+      ev: DomUtilsEvent<HTMLElementEventMap[K]>,
+    ) => void,
   ): this;
   onChild(
     event: string,
     query: string,
-    handler: EventListenerOrEventListenerObject,
+    handler: DomUtilsEventListenerOrEventListenerObject,
   ): this;
   onChild(
     event: keyof HTMLElementEventMap | string,
     query: string,
     handler:
-      | EventListenerOrEventListenerObject
-      | ((this: HTMLElement, ev: Event) => void),
+      | DomUtilsEventListenerOrEventListenerObject
+      | ((this: HTMLElement, ev: DomUtilsEvent) => void),
   ): this {
     // this type was some AI magic but if it works it works
     this.native.addEventListener(event, (e) => {
@@ -671,14 +680,14 @@ export class ElementsWithUtils<
    */
   on<K extends keyof HTMLElementEventMap>(
     event: K,
-    handler: (this: T, ev: HTMLElementEventMap[K]) => void,
+    handler: (this: T, ev: DomUtilsEvent<HTMLElementEventMap[K]>) => void,
   ): this;
-  on(event: string, handler: EventListenerOrEventListenerObject): this;
+  on(event: string, handler: DomUtilsEventListenerOrEventListenerObject): this;
   on(
     event: keyof HTMLElementEventMap | string,
     handler:
-      | EventListenerOrEventListenerObject
-      | ((this: T, ev: Event) => void),
+      | DomUtilsEventListenerOrEventListenerObject
+      | ((this: T, ev: DomUtilsEvent) => void),
   ): this {
     for (const item of this) {
       item.on(event, handler);