fix(core/tabs): minimize tab auto scroll distance (#1390)

Co-authored-by: Andreas Berliner <[email protected]>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

.changeset/neat-sloths-talk.md

@@ -0,0 +1,5 @@
+---
+"@siemens/ix": patch
+---
+
+fix(core/tabs): minimize tab auto scroll distance

packages/core/component-doc.json

@@ -14312,7 +14312,7 @@
               "type": "number"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false
         },
         {

packages/core/src/components.d.ts

@@ -2035,7 +2035,7 @@ export namespace Components {
         /**
           * Set counter value
          */
-        "counter": number;
+        "counter"?: number;
         /**
           * Set disabled tab
          */

packages/core/src/components/tab-item/tab-item.tsx

@@ -47,7 +47,7 @@ export class TabItem {
   /**
    * Set counter value
    */
-  @Prop() counter: number;
+  @Prop() counter?: number;
 
   /**
    * Set layout width style
@@ -64,7 +64,7 @@ export class TabItem {
    *
    * @since 2.0.0
    */
-  @Event() tabClick: EventEmitter<TabClickDetail>;
+  @Event() tabClick!: EventEmitter<TabClickDetail>;
 
   private tabItemClasses(props: {
     selected: boolean;

packages/core/src/components/tabs/tabs.tsx

@@ -17,6 +17,7 @@ import {
   Listen,
   Prop,
   State,
+  Watch,
 } from '@stencil/core';
 import { requestAnimationFrameNoNgZone } from '../utils/requestAnimationFrame';
 
@@ -126,7 +127,7 @@ export class Tabs {
 
   private showPreviousArrow() {
     try {
-      return this.showArrows() && this.scrollActionAmount < 0;
+      return this.showArrows() === true && this.scrollActionAmount < 0;
     } catch (error) {
       return false;
     }
@@ -143,7 +144,7 @@ export class Tabs {
       const tabWrapperRect = tabWrapper.getBoundingClientRect();
 
       return (
-        this.showArrows() &&
+        this.showArrows() === true &&
         this.scrollActionAmount >
           (tabWrapper.scrollWidth - tabWrapperRect.width) * -1
       );
@@ -153,38 +154,54 @@ export class Tabs {
   }
 
   private move(amount: number, click = false) {
-    const tabWrapper = this.getTabsWrapper();
+    const tabsWrapper = this.getTabsWrapper();
+
+    if (!tabsWrapper) {
+      return;
+    }
+
+    const tabsWrapperVisibleWidth = tabsWrapper.getBoundingClientRect().width;
     const maxScrollWidth =
-      (tabWrapper.scrollWidth - tabWrapper.getBoundingClientRect().width) * -1;
+      -this.currentScrollAmount +
+      tabsWrapperVisibleWidth -
+      tabsWrapper.scrollWidth;
 
-    amount = this.currentScrollAmount + amount;
-    amount = amount > 0 ? 0 : amount < maxScrollWidth ? maxScrollWidth : amount;
+    amount = amount < maxScrollWidth ? maxScrollWidth : amount;
+    amount += this.currentScrollAmount;
+    amount = Math.min(amount, 0);
 
     const styles = [
       `transform: translateX(${amount}px);`,
       click ? 'transition: all ease-in-out 400ms;' : '',
     ].join('');
 
-    tabWrapper.setAttribute('style', styles);
+    tabsWrapper.setAttribute('style', styles);
 
     if (click) this.currentScrollAmount = this.scrollActionAmount = amount;
     else this.scrollActionAmount = amount;
   }
 
-  private moveTabToView(tabIndex: number) {
+  @Watch('selected')
+  onSelectedChange(newValue: number) {
     if (!this.showArrows()) return;
 
-    const tab = this.getTab(tabIndex).getBoundingClientRect();
-    const amount = tab.x * -1;
-    this.move(amount, true);
+    const tabRect = this.getTab(newValue).getBoundingClientRect();
+    const wrapperWidth = this.getTabsWrapper()?.clientWidth;
+    const arrowWidth = 32;
+
+    if (tabRect.left < arrowWidth) {
+      this.move(-tabRect.left + arrowWidth, true);
+    } else if (wrapperWidth && tabRect.right > wrapperWidth - arrowWidth) {
+      this.move(wrapperWidth - tabRect.right - arrowWidth, true);
+    }
   }
 
   private setSelected(index: number) {
     this.selected = index;
   }
 
   private clickTab(index: number) {
-    if (this.dragStop()) {
+    if (!this.clickAction.isClick || this.dragStop()) {
       return;
     }
 
@@ -194,7 +211,6 @@ export class Tabs {
     }
 
     this.setSelected(index);
-    this.moveTabToView(index);
   }
 
   private dragStart(element: HTMLIxTabItemElement, event: MouseEvent) {
@@ -210,11 +226,12 @@ export class Tabs {
     const mousedownPositionX = event.clientX;
     const move = (event: MouseEvent) =>
       this.dragMove(event, tabPositionX, mousedownPositionX);
-
-    window.addEventListener('mouseup', () => {
+    const windowClick = () => {
       window.removeEventListener('mousemove', move, false);
+      window.removeEventListener('click', windowClick, false);
       this.dragStop();
-    });
+    };
+    window.addEventListener('click', windowClick);
     window.addEventListener('mousemove', move, false);
   }
 
@@ -225,8 +242,8 @@ export class Tabs {
   private dragStop() {
     if (this.clickAction.timeout) {
       clearTimeout(this.clickAction.timeout);
+      this.clickAction.timeout = null;
     }
-    this.clickAction.timeout = null;
 
     if (this.clickAction.isClick) return false;
 

packages/core/src/components/tabs/test/tabs.ct.ts

@@ -105,3 +105,23 @@ test('should update layout on resize', async ({ mount, page }) => {
   await page.setViewportSize({ width: 1000, height: 100 });
   await expect(arrowNext).not.toBeVisible();
 });
+
+test('should scroll selected tab into view', async ({ mount, page }) => {
+  await mount(`
+    <ix-tabs>
+      <ix-tab-item>Item 1</ix-tab-item>
+      <ix-tab-item>Item 2</ix-tab-item>
+      <ix-tab-item>Item 3</ix-tab-item>
+      <ix-tab-item>Item 4</ix-tab-item>
+      <ix-tab-item>Item 5</ix-tab-item>
+      <ix-tab-item>Item 6</ix-tab-item>
+    </ix-tabs>
+  `);
+  await page.setViewportSize({ width: 300, height: 100 });
+  const clickedTab = page.locator('ix-tab-item').nth(3);
+  const lastTab = page.locator('ix-tab-item').last();
+  await clickedTab.click();
+  await page.waitForTimeout(500);
+  await expect(clickedTab).toBeInViewport();
+  await expect(lastTab).not.toBeInViewport();
+});

packages/core/src/tests/tabs/overflow/index.html

@@ -16,18 +16,8 @@
   <body>
     <style>
       .example {
-        display: block;
-        position: relative;
         width: 50%;
       }
-
-      div[data-tab-content] {
-        display: none;
-      }
-
-      div[data-tab-content].show {
-        display: block;
-      }
     </style>
     <div class="example">
       <ix-tabs layout="auto">
@@ -40,33 +30,7 @@
         <ix-tab-item data-tab-id="7">Biggest Tab 7</ix-tab-item>
         <ix-tab-item data-tab-id="8">Biggest Tab 8</ix-tab-item>
       </ix-tabs>
-      <div data-tab-content="1" class="show">Content Tab 1</div>
-      <div data-tab-content="2">Content Tab 2</div>
-      <div data-tab-content="3">Content Tab 3</div>
-      <div data-tab-content="7">Should be in overflow</div>
     </div>
-
-    <script>
-      (async function () {
-        await window.customElements.whenDefined('ix-tabs');
-        const tabs = document.querySelectorAll('ix-tab-item[data-tab-id]');
-
-        function registerClickListener(tab) {
-          tab.addEventListener('click', (tabContent) => {
-            const contentList = document.querySelectorAll('[data-tab-content]');
-            contentList.forEach((content) => {
-              if (content.dataset.tabContent === tab.dataset.tabId) {
-                content.classList.add('show');
-              } else {
-                content.classList.remove('show');
-              }
-            });
-          });
-        }
-
-        tabs.forEach(registerClickListener);
-      })();
-    </script>
     <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
   </body>
 </html>

packages/core/src/tests/tabs/tabs.e2e.ts

@@ -29,7 +29,7 @@ regressionTest.describe('tabs', () => {
   regressionTest('overflow', async ({ page }) => {
     await page.goto('tabs/overflow');
 
-    const selectItem = await page.waitForSelector("[data-tab-id='7']");
+    const selectItem = await page.waitForSelector("[data-tab-id='5']");
     await selectItem.click();
 
     await page.waitForTimeout(500);