refactor(app): move focus utils to global

Author: Tanner Reits

core/src/components/app/app.tsx

@@ -1,9 +1,9 @@
 import type { ComponentInterface } from '@stencil/core';
-import { Build, Component, Element, Host, Method, h } from '@stencil/core';
-import type { FocusVisibleUtility } from '@utils/focus-visible';
+import { Component, Element, Host, Method, h } from '@stencil/core';
+import { initFocusVisibleUtility } from '@utils/focus-visible';
 
 import { config } from '../../global/config';
-import { getIonTheme, rIC } from '../../global/ionic-global';
+import { getIonTheme } from '../../global/ionic-global';
 
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
@@ -14,19 +14,8 @@ import { getIonTheme, rIC } from '../../global/ionic-global';
   styleUrl: 'app.scss',
 })
 export class App implements ComponentInterface {
-  private focusVisible?: FocusVisibleUtility;
-
   @Element() el!: HTMLElement;
 
-  componentDidLoad() {
-    // TODO can we move focus visible to global
-    if (Build.isBrowser) {
-      rIC(async () => {
-        import('../../utils/focus-visible').then((module) => (this.focusVisible = module.startFocusVisible()));
-      });
-    }
-  }
-
   /**
    * @internal
    * Used to set focus on an element that uses `ion-focusable`.
@@ -39,9 +28,8 @@ export class App implements ComponentInterface {
    */
   @Method()
   async setFocus(elements: HTMLElement[]) {
-    if (this.focusVisible) {
-      this.focusVisible.setFocus(elements);
-    }
+    const focusVisible = initFocusVisibleUtility();
+    focusVisible.setFocus(elements);
   }
 
   render() {

core/src/global/ionic-global.ts

@@ -327,8 +327,7 @@ export const initialize = (userConfig: IonicConfig = {}) => {
       if (typeof (window as any) !== 'undefined') {
         import('../utils/keyboard/keyboard').then((module) => module.startKeyboardAssist(window));
       }
-      // TODO
-      // import('../../utils/focus-visible').then((module) => (this.focusVisible = module.startFocusVisible()));
+      import('../utils/focus-visible').then((module) => (module.initFocusVisibleUtility()));
     });
   }
 };

core/src/utils/focus-visible.ts

@@ -20,6 +20,15 @@ export interface FocusVisibleUtility {
   setFocus: (elements: Element[]) => void;
 }
 
+let focusVisibleUtility: FocusVisibleUtility | null = null;
+
+export const initFocusVisibleUtility = () => {
+  if (!focusVisibleUtility) {
+    focusVisibleUtility = startFocusVisible();
+  }
+  return focusVisibleUtility;
+};
+
 export const startFocusVisible = (rootEl?: HTMLElement): FocusVisibleUtility => {
   let currentFocus: Element[] = [];
   let keyboardMode = true;