diff --git a/core/src/utils/browser/index.ts b/core/src/utils/browser/index.ts index 5013b9f2c9..d50ceb5701 100644 --- a/core/src/utils/browser/index.ts +++ b/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) => void, + options?: boolean | AddEventListenerOptions + ): void; + removeEventListener( + type: 'ionInputDidLoad', + listener: (ev: CustomEvent) => void, + options?: boolean | AddEventListenerOptions + ): void; + addEventListener( + type: 'ionInputDidUnload', + listener: (ev: CustomEvent) => void, + options?: boolean | AddEventListenerOptions + ): void; + removeEventListener( + type: 'ionInputDidUnload', + listener: (ev: CustomEvent) => 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; diff --git a/core/src/utils/input-shims/input-shims.ts b/core/src/utils/input-shims/input-shims.ts index e78a5c0be6..5919a5fa1b 100644 --- a/core/src/utils/input-shims/input-shims.ts +++ b/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;