fix(tabs): ensure that "auto" attribute is respected

adobe · Feb 17, 2022 · d200775 · d200775
1 parent cdeb543
commit d200775
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 2 deletions.
diff --git a/packages/tabs/src/Tabs.ts b/packages/tabs/src/Tabs.ts
@@ -105,7 +105,7 @@ export class Tabs extends SizedMixin(Focusable) {
     private _tabs: Tab[] = [];
 
     rovingTabindexController = new RovingTabindexController<Tab>(this, {
-        focusInIndex: (elements: Tab[]) => {
+        focusInIndex: (elements) => {
             let focusInIndex = 0;
             const firstFocusableElement = elements.find((el, index) => {
                 const focusInElement = this.selected
@@ -118,8 +118,14 @@ export class Tabs extends SizedMixin(Focusable) {
         },
         direction: () =>
             this.direction === 'horizontal' ? 'horizontal' : 'vertical',
+        elementEnterAction: (el) => {
+            if (!this.auto) return;
+
+            this.shouldAnimate = true;
+            this.selectTarget(el);
+        },
         elements: () => this.tabs,
-        isFocusableElement: (el: Tab) => !el.disabled,
+        isFocusableElement: (el) => !el.disabled,
         listenerScope: () => this.tabList,
     });
 

diff --git a/packages/tabs/test/tabs.test.ts b/packages/tabs/test/tabs.test.ts
@@ -31,6 +31,7 @@ import {
     enterEvent,
     spaceEvent,
 } from '../../../test/testing-helpers.js';
+import { sendKeys } from '@web/test-runner-commands';
 
 const createTabs = async (): Promise<Tabs> => {
     const tabs = await fixture<Tabs>(
@@ -176,6 +177,35 @@ describe('Tabs', () => {
         );
     });
 
+    it('auto', async () => {
+        const el = await fixture<Tabs>(
+            html`
+                <sp-tabs selected="second" auto>
+                    <sp-tab label="Tab 1" value="first"></sp-tab>
+                    <sp-tab label="Tab 2" value="second"></sp-tab>
+                    <sp-tab label="Tab 3" value="third"></sp-tab>
+                </sp-tabs>
+            `
+        );
+
+        await elementUpdated(el);
+
+        expect(el.selected).to.equal('second');
+        el.focus();
+        await sendKeys({
+            press: 'ArrowLeft',
+        });
+        expect(el.selected).to.equal('first');
+        await sendKeys({
+            press: 'ArrowLeft',
+        });
+        expect(el.selected).to.equal('third');
+        await sendKeys({
+            press: 'ArrowRight',
+        });
+        expect(el.selected).to.equal('first');
+    });
+
     it('forces only one tab to be selected', async () => {
         const tabs = await createTabs();