From ca7ccce0c1d043ec78912cbbd7c814532c982067 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Wed, 11 Dec 2024 11:11:05 +0300
Subject: [PATCH] Fixed #6915 - Tabs: Scrollable tabs being skipped

---
 packages/primevue/src/tablist/TabList.vue | 29 ++++++++++++++++-------
 1 file changed, 20 insertions(+), 9 deletions(-)

diff --git a/packages/primevue/src/tablist/TabList.vue b/packages/primevue/src/tablist/TabList.vue
index 70bfe0331..ab48b9660 100644
--- a/packages/primevue/src/tablist/TabList.vue
+++ b/packages/primevue/src/tablist/TabList.vue
@@ -89,18 +89,24 @@ export default {
         },
         onPrevButtonClick() {
             const content = this.$refs.content;
-            const width = getWidth(content);
-            const pos = Math.abs(content.scrollLeft) - width;
-            const scrollLeft = pos <= 0 ? 0 : pos;
+            const buttonWidths = this.getVisibleButtonWidths();
+            const width = getWidth(content) - buttonWidths;
+            const currentScrollLeft = Math.abs(content.scrollLeft);
+            const scrollStep = width * 0.8;
+            const targetScrollLeft = currentScrollLeft - scrollStep;
+            const scrollLeft = Math.max(targetScrollLeft, 0);
 
             content.scrollLeft = isRTL(content) ? -1 * scrollLeft : scrollLeft;
         },
         onNextButtonClick() {
             const content = this.$refs.content;
-            const width = getWidth(content) - this.getVisibleButtonWidths();
-            const pos = width + Math.abs(content.scrollLeft);
-            const lastPos = content.scrollWidth - width;
-            const scrollLeft = pos >= lastPos ? lastPos : pos;
+            const buttonWidths = this.getVisibleButtonWidths();
+            const width = getWidth(content) - buttonWidths;
+            const currentScrollLeft = Math.abs(content.scrollLeft);
+            const scrollStep = width * 0.8;
+            const targetScrollLeft = currentScrollLeft + scrollStep;
+            const maxScrollLeft = content.scrollWidth - width;
+            const scrollLeft = Math.min(targetScrollLeft, maxScrollLeft);
 
             content.scrollLeft = isRTL(content) ? -1 * scrollLeft : scrollLeft;
         },
@@ -139,9 +145,14 @@ export default {
             }
         },
         getVisibleButtonWidths() {
-            const { prevBtn, nextBtn } = this.$refs;
+            const { prevButton, nextButton } = this.$refs;
+            let width = 0;
 
-            return [prevBtn, nextBtn].reduce((acc, el) => (el ? acc + getWidth(el) : acc), 0);
+            if (this.showNavigators) {
+                width = (prevButton?.offsetWidth || 0) + (nextButton?.offsetWidth || 0);
+            }
+
+            return width;
         }
     },
     computed: {