refactor(focus-visible): reset on onFocus

core/src/utils/focus-visible.ts

@@ -13,6 +13,7 @@ const FOCUS_KEYS = [
   'ArrowUp',
   'Home',
   'End',
+  'Meta',
 ];
 
 export interface FocusVisibleUtility {
@@ -28,24 +29,34 @@ export const startFocusVisible = (rootEl?: HTMLElement): FocusVisibleUtility =>
   const root = rootEl ? rootEl : document.body;
 
   const setFocus = (elements: Element[]) => {
+    console.log('setFocus', elements, currentFocus);
+    console.log('keyboardMode', keyboardMode);
     currentFocus.forEach((el) => el.classList.remove(ION_FOCUSED));
     elements.forEach((el) => el.classList.add(ION_FOCUSED));
     currentFocus = elements;
   };
-  const pointerDown = () => {
+  // SPACE triggers on iOS device with physical keyboard
+  const pointerDown = (ev: Event) => {
+    console.log('pointerDown', ev);
+    console.log('keyboardMode', keyboardMode);
     keyboardMode = false;
     setFocus([]);
   };
-
+// Enter triggers on iOS device with physical keyboard
   const onKeydown = (ev: Event) => {
+    console.log('onKeydown', ev);
+    console.log('keyboardMode', keyboardMode);
     keyboardMode = FOCUS_KEYS.includes((ev as KeyboardEvent).key);
     if (!keyboardMode) {
       setFocus([]);
     }
   };
   const onFocusin = (ev: Event) => {
+    console.log('onFocusin', ev);
+    console.log('keyboardMode', keyboardMode);
+    let toFocus: Element[] = [];
     if (keyboardMode && ev.composedPath !== undefined) {
-      const toFocus = ev.composedPath().filter((el: any) => {
+      toFocus = ev.composedPath().filter((el: any) => {
         // TODO(FW-2832): type
         if (el.classList) {
           return el.classList.contains(ION_FOCUSABLE);
@@ -54,8 +65,12 @@ export const startFocusVisible = (rootEl?: HTMLElement): FocusVisibleUtility =>
       }) as Element[];
       setFocus(toFocus);
     }
+    console.log('toFocus', toFocus);
+    keyboardMode = true;
   };
   const onFocusout = () => {
+    console.log('onFocusout');
+    console.log('keyboardMode', keyboardMode);
     if (ref.activeElement === root) {
       setFocus([]);
     }