refactor: improve types for input shims (#28333)

core/src/utils/browser/index.ts

@@ -27,7 +27,7 @@
  * on the window for certain CustomEvent types you can add that definition
  * here as long as you are using the "win" utility below.
  */
-type IonicWindow = Window & {
+type IonicEvents = {
   addEventListener(
     type: 'ionKeyboardDidShow',
     listener: (ev: CustomEvent<{ keyboardHeight: number }>) => void,
@@ -38,8 +38,31 @@ type IonicWindow = Window & {
     listener: (ev: CustomEvent<{ keyboardHeight: number }>) => void,
     options?: boolean | AddEventListenerOptions
   ): void;
+  addEventListener(
+    type: 'ionInputDidLoad',
+    listener: (ev: CustomEvent<HTMLIonInputElement | HTMLIonTextareaElement>) => void,
+    options?: boolean | AddEventListenerOptions
+  ): void;
+  removeEventListener(
+    type: 'ionInputDidLoad',
+    listener: (ev: CustomEvent<HTMLIonInputElement | HTMLIonTextareaElement>) => void,
+    options?: boolean | AddEventListenerOptions
+  ): void;
+  addEventListener(
+    type: 'ionInputDidUnload',
+    listener: (ev: CustomEvent<HTMLIonInputElement | HTMLIonTextareaElement>) => void,
+    options?: boolean | AddEventListenerOptions
+  ): void;
+  removeEventListener(
+    type: 'ionInputDidUnload',
+    listener: (ev: CustomEvent<HTMLIonInputElement | HTMLIonTextareaElement>) => void,
+    options?: boolean | AddEventListenerOptions
+  ): void;
 };
 
+type IonicWindow = Window & IonicEvents;
+type IonicDocument = Document & IonicEvents;
+
 export const win: IonicWindow | undefined = typeof window !== 'undefined' ? window : undefined;
 
-export const doc: Document | undefined = typeof document !== 'undefined' ? document : undefined;
+export const doc: IonicDocument | undefined = typeof document !== 'undefined' ? document : undefined;

core/src/utils/input-shims/input-shims.ts

@@ -1,3 +1,5 @@
+import { doc } from '@utils/browser';
+
 import type { Config } from '../../interface';
 import { findClosestIonContent } from '../content';
 import { componentOnReady } from '../helpers';
@@ -12,7 +14,14 @@ const SCROLL_ASSIST = true;
 const HIDE_CARET = true;
 
 export const startInputShims = async (config: Config, platform: 'ios' | 'android') => {
-  const doc = document;
+  /**
+   * If doc is undefined then we are in an SSR environment
+   * where input shims do not apply.
+   */
+  if (doc === undefined) {
+    return;
+  }
+
   const isIOS = platform === 'ios';
   const isAndroid = platform === 'android';
 
@@ -115,15 +124,13 @@ export const startInputShims = async (config: Config, platform: 'ios' | 'android
     registerInput(input);
   }
 
-  // TODO(FW-2832): types
+  doc.addEventListener('ionInputDidLoad', (ev: InputEvent) => {
-
-  doc.addEventListener('ionInputDidLoad', ((ev: InputEvent) => {
     registerInput(ev.detail);
-  }) as any);
+  });
 
-  doc.addEventListener('ionInputDidUnload', ((ev: InputEvent) => {
+  doc.addEventListener('ionInputDidUnload', (ev: InputEvent) => {
     unregisterInput(ev.detail);
-  }) as any);
+  });
 };
 
 type InputEvent = CustomEvent<HTMLElement>;