bug: scroll to the right button renders for short lists on playground

[thetaPC]

Describe the Bug

The playground files will render a scroll to the right button when the the files view overflows (which makes sense):

However, when I select a different framework that doesn't overflow, then the scroll to the right button still shows. This only happens when at least one framework has tabs that overflow.

Expected Behavior

I expect to not see the scroll to the right button when the current tabs don't overflow.

Steps to Reproduce

1. Navigate to the Action Sheet -> "Collecting Role Information on Dismiss" section
2. Verify that Angular is selected
3. Verify the scroll to the right button renders
4. Click on React
5. Notice the scroll to the right button is still present
6. Navigate to the Action Sheet -> "Styling"
7. Notice that the Angular doesn't render the scroll to the right button
8. Click on React
9. Notice the scroll to the right button is not rendered

Screenshots

With bug:
Angular

React

Without bug:
Angular

React

Operating System

macOS

Browser

Firefox

Version

114.0.1

Additional Information

The code source can be found in the PlaygrounTabs index file.

[averyjohnston]

Thanks! I'm able to reproduce this. It looks like we need to re-update the navVisible states whenever the selected framework changes. (Theoretically, this should be as simple as adding selectedValue to the array passed into the useEffect here.)

Right now, the scroll buttons are only updated on init and on scroll in the file list, so I suspect that whether they're set initially is dependent entirely on the Angular files, since Angular is the default. Thankfully, Angular generally has the most files, so we're less likely to have the opposite situation where you should be able to scroll but can't. That will change if we implement #2798, though, so we should definitely fix this before then.

Side note: I actually didn't see the bug trigger on my first try, but every subsequent refresh (including incognito) did trigger it. Maybe I just clicked on React too fast the first time?

[thetaPC]

This will be available on the site soon!