perf(shared): focus-visible, lazily instantiate the focus-visible pol…

…yfilling
adobe · Nov 24, 2020 · 1ffcedb · 1ffcedb
1 parent 0283b7e
commit 1ffcedb
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 14 deletions.
diff --git a/packages/shared/src/focus-visible.ts b/packages/shared/src/focus-visible.ts
@@ -114,20 +114,26 @@ export const FocusVisiblePolyfillMixin = <
         // document:
         connectedCallback(): void {
             super.connectedCallback && super.connectedCallback();
-            if (this[$endPolyfillCoordination] == null) {
-                this[$endPolyfillCoordination] = coordinateWithPolyfill(this);
-            }
+            requestAnimationFrame(() => {
+                if (this[$endPolyfillCoordination] == null) {
+                    this[$endPolyfillCoordination] = coordinateWithPolyfill(
+                        this
+                    );
+                }
+            });
         }
 
         disconnectedCallback(): void {
             super.disconnectedCallback && super.disconnectedCallback();
             // It's important to remove the polyfill event listener when we
             // disconnect, otherwise we will leak the whole element via window:
-            if (this[$endPolyfillCoordination] != null) {
-                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                this[$endPolyfillCoordination]!();
-                this[$endPolyfillCoordination] = null;
-            }
+            requestAnimationFrame(() => {
+                if (this[$endPolyfillCoordination] != null) {
+                    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                    this[$endPolyfillCoordination]!();
+                    this[$endPolyfillCoordination] = null;
+                }
+            });
         }
     }
 

diff --git a/packages/shared/src/focusable.ts b/packages/shared/src/focusable.ts
@@ -135,12 +135,14 @@ export class Focusable extends FocusVisiblePolyfillMixin(SpectrumElement) {
     protected manageAutoFocus(): void {
         if (this.autofocus) {
             /* Trick :focus-visible polyfill into thinking keyboard based focus */
-            this.dispatchEvent(
-                new KeyboardEvent('keydown', {
-                    code: 'Tab',
-                })
-            );
-            this.focusElement.focus();
+            requestAnimationFrame(() => {
+                this.dispatchEvent(
+                    new KeyboardEvent('keydown', {
+                        code: 'Tab',
+                    })
+                );
+                this.focusElement.focus();
+            });
         }
     }