fix: make sp-tab-list work in Edge

- Fix an error with awaiting font loading - Fix event handling on slotted content
adobe · Apr 17, 2020 · 948559a · 948559a
1 parent 34fc0d6
commit 948559a
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 9 deletions.
diff --git a/package.json b/package.json
@@ -127,7 +127,7 @@
         "@typescript-eslint/eslint-plugin": "^2.24.0",
         "@typescript-eslint/parser": "^2.24.0",
         "@vaadin/router": "^1.2.0",
-        "@webcomponents/webcomponentsjs": "^2.2.0",
+        "@webcomponents/webcomponentsjs": "^2.4.3",
         "babel-loader": "^8.0.5",
         "babel-plugin-bundled-import-meta": "^0.3.2",
         "babel-plugin-transform-node-env-inline": "^0.4.3",

diff --git a/packages/tab-list/src/tab-list.ts b/packages/tab-list/src/tab-list.ts
@@ -28,6 +28,14 @@ const availableArrowsByDirection = {
     horizontal: ['ArrowLeft', 'ArrowRight'],
 };
 
+declare global {
+    interface Document {
+        fonts?: {
+            ready: Promise<void>,
+        }
+    }
+}
+
 /**
  * @slot - Child tab elements
  * @attr {Boolean} quiet - The tab-list border is a lot smaller
@@ -75,6 +83,15 @@ export class TabList extends Focusable {
             this.querySelector('sp-tab')) as Tab;
     }
 
+    constructor() {
+        super()
+
+        // These can be added as @click and @keydown handlers on the
+        // slot once we no longer need web component polyfills
+        this.addEventListener('click', this.onClick);
+        this.addEventListener('keydown', this.onKeyDown);
+    }
+
     protected manageAutoFocus(): void {
         const tabs = [...this.children] as Tab[];
         const tabUpdateCompletes = tabs.map((tab) => {
@@ -87,8 +104,6 @@ export class TabList extends Focusable {
     protected render(): TemplateResult {
         return html`
             <slot
-                @click=${this.onClick}
-                @keydown=${this.onKeyDown}
                 @slotchange=${this.onSlotChange}
             ></slot>
             <div
@@ -161,7 +176,7 @@ export class TabList extends Focusable {
         ].focus();
     }
 
-    private onClick(event: Event): void {
+    private onClick = (event: Event): void => {
         const target = event.target as HTMLElement;
         this.selectTarget(target);
         if (this.shouldApplyFocusVisible) {
@@ -175,7 +190,7 @@ export class TabList extends Focusable {
         }
     }
 
-    private onKeyDown(event: KeyboardEvent): void {
+    private onKeyDown = (event: KeyboardEvent): void => {
         if (event.key === 'Enter' || event.key === ' ') {
             event.preventDefault();
             const target = event.target as HTMLElement;
@@ -240,9 +255,8 @@ export class TabList extends Focusable {
             return;
         }
         await Promise.all([
-            await selectedElement.updateComplete,
-            await ((document as unknown) as { fonts: { ready: Promise<void> } })
-                .fonts.ready,
+            selectedElement.updateComplete,
+            document.fonts ? document.fonts.ready : Promise.resolve(),
         ]);
         const tabBoundingClientRect = selectedElement.getBoundingClientRect();
         const parentBoundingClientRect = this.getBoundingClientRect();

diff --git a/yarn.lock b/yarn.lock
@@ -3804,7 +3804,7 @@
   resolved "https://registry.yarnpkg.com/@webcomponents/webcomponents-platform/-/webcomponents-platform-1.0.1.tgz#4e7ae8b40bcade06f5fdfa73fdb0211d90908866"
   integrity sha512-7Ua2c3FvqAuiC2++gIoStG9r0B5sxleq8B7o0XKuIM052amWPTaCka0UMvnQRRJEsdGgRGIUv6sLkOyfhcr1dw==
 
-"@webcomponents/webcomponentsjs@^2.2.0", "@webcomponents/webcomponentsjs@^2.4.0":
+"@webcomponents/webcomponentsjs@^2.4.0", "@webcomponents/webcomponentsjs@^2.4.3":
   version "2.4.3"
   resolved "https://registry.yarnpkg.com/@webcomponents/webcomponentsjs/-/webcomponentsjs-2.4.3.tgz#384f4f6d54563ba465fb4df21fe89e78a76fc530"
   integrity sha512-cV4+sAmshf8ysU2USutrSRYQkJzEYKHsRCGa0CkMElGpG5747VHtkfsW3NdVIBV/m2MDKXTDydT4lkrysH7IFA==