TabView: Forward button doesnt disappear when the container size varies

[jerrin]

Describe the bug

The forward button doesnt disappear for TabView Scrollable component when the container width is set and scrolled to the last tab.

I believe the conditions for the button visibility needs to be adjusted here

Reproducer

https://stackblitz.com/edit/vitejs-vite-dthk4c?file=src%2FApp.tsx,src%2Fmain.tsx,package.json

PrimeReact version

10.6.3

React version

18.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

Chrome

Steps to reproduce the behavior

1. Use the StockBlitz example from https://primereact.org/tabview/#scrollable
2. set the width of the container div to 400px
3. Navigate to the last tab but the forward button still visible

Expected behavior

Forward button must disappear when scolled to last tab

[melloware]

@jerrin PR is welcome!

[Rekl0w]

Can you provide a stackblitz link for this issue, i tried but it worked on mine.

[github-actions]

Please fork the Stackblitz project and create a case demonstrating your bug report. This issue will be closed if no activities in 20 days.

[jerrin]

Can you provide a stackblitz link for this issue, i tried but it worked on mine.

Here we go, https://stackblitz.com/edit/vitejs-vite-dthk4c?file=src%2FApp.tsx,src%2Fmain.tsx,package.json

I could reproduce the issue consistently on Chrome but not on Firefox.

screencast-stackblitz.com-2024.04.22-13_36_20.webm

[Rekl0w]

I tried at different browsers but still it works on mine.

[melloware]

Looks like PrimeVue does something similar but not exact

https://github.com/primefaces/primevue/blob/b2a4af2fce93772581dbec5712e54c18ab6d613b/components/lib/tabview/TabView.vue#L330-L337

[Rekl0w]

PrimeVue has one difference that it parses scrollLeft to integer, rest are same.

[jerrin]

Perhaps round up the scrollLeft value while evaluating the condition?

[melloware]

That must be the intent of parseInt(scrollLeft) in PrimeVue.

[melloware]

Fixed for next release