fix(shared): prevent focusing focusable root on second click

adobe · Jan 15, 2020 · 0fb5006 · 0fb5006
1 parent 7abf085
commit 0fb5006
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 0 deletions.
diff --git a/packages/shared/src/focusable.ts b/packages/shared/src/focusable.ts
@@ -90,6 +90,9 @@ export class Focusable extends FocusVisiblePolyfillMixin(LitElement) {
     }
 
     protected manageFocusIn(): void {
+        this.addEventListener('mousedown', (event) => {
+            event.preventDefault();
+        });
         this.addEventListener('focusin', (event) => {
             if (event.composedPath()[0] === this) {
                 this.handleFocus();

diff --git a/packages/tab-list/src/tab-list.ts b/packages/tab-list/src/tab-list.ts
@@ -110,11 +110,15 @@ export class TabList extends Focusable {
         }
     }
 
+    private isListeningToKeyboard = false;
+
     public startListeningToKeyboard = (): void => {
         this.addEventListener('keydown', this.handleKeydown);
+        this.isListeningToKeyboard = true;
     };
 
     public stopListeningToKeyboard = (): void => {
+        this.isListeningToKeyboard = false;
         this.removeEventListener('keydown', this.handleKeydown);
     };
 
@@ -136,6 +140,15 @@ export class TabList extends Focusable {
     private onClick(event: Event): void {
         const target = event.target as HTMLElement;
         this.selectTarget(target);
+        if (this.isListeningToKeyboard) {
+            /* Trick :focus-visible polyfill into thinking keyboard based focus */
+            this.dispatchEvent(
+                new KeyboardEvent('keydown', {
+                    code: 'Tab',
+                })
+            );
+            target.focus();
+        }
     }
 
     private onKeyDown(event: KeyboardEvent): void {