[Tabs] - Tabs in pagination mode lose track of tabs on window resize

[phlare]

Description

When enough tabs are used that pagination behavior is triggered, and the user changes the viewport size, a number of strange things start happening:

1. the Tabs component seems to switch between mobile (scrolling) mode and desktop (paginated) mode somewhat indiscriminately if the Tabs property mobile is set to true or not set at all.

2. the number of tabs that should fit on each page seems to be miscalculated, but only sometimes - when this occurs, if the pagination controls are used, sometimes there will be tabs missing altogether.

• my codepen example uses 8 tabs, and occasionally only one will be shown per page, and there will be only pages for tabs 0 - 4)
• a different time, only three tabs are shown per "page" and the tabs are 1 2 3 on the second page, 4 5 6 on the third page, 7 appears nowhere, and trying to go "back" to where i would expect the 0 tab would be results in an error. Unfortunately, i can't reliably reproduce this case
• It seems to only ever happen when the window is resized - initial loads tend to work fine in any viewport size
• It seems to primarily happen when a tab from the second (or third) "page" is selected
• this issue can also occur when the TabContainer is inside of another element which itself may change size slightly (due to content changes or something) and not just the user changing the browser window size - but this is much harder to reproduce

my best instructions on how to (somewhat) reliably reproduce this issue are as follows:

1. load my codepen example
2. resize viewport to a size small enough for the tabs to go into paginated mode (0 through 5 displayed)
3. reload the page
4. click into the second "page" of tabs (6 and 7 displayed)
5. click one of the tabs on the second page (tab 6)
6. resize the window a bit - as you move slowly it will flicker between showing an appropriate number of tabs and only 1 or two.
7. stop resizing when only one tab is showing
8. paginate through the tabs back to 0 - it continues to show only one tab per page
9. paginate forward through the tabs and it only reaches tab 4, with no more "next" button

Images/Screenshots

Link to a gist or code sample where the issue can be reproduced

codepen example: https://codepen.io/phlare/pen/MVmwez

Version

• React - 16 (https://unpkg.com/react@16/umd/react.development.js)
• React-MD - 1.2.12
• Browser - not browser specific, but only effects desktop

[phlare]

This issue was first discovered in developing our guidebook product at hostfully, but I've worked around it by forcing the tabs into mobile mode 100% of the time using the mobile property of the Tabs component and adding some extra css to make the mobile version of the tabs work inside a container that isn't 100vw. and some javascript love to bounce the slider a bit so it's obvious that there are more tabs.

I'm actually pretty happy with my workaround and like it better than the paginated version anyway, so this certainly isn't a showstopper bug for me or anything, but I just wanted to get this issue raised properly.

cheers

[kanso-michael]

@mlaursen Any sign of fixes/workarounds/resolutions to these issues?

[mlaursen]

@kanso-michael Sorry, not yet. There is a big problem with how I am determining which elements can be visible since I actually remove them from the DOM and never add them back or do recalculations after a resize.

This bug isn't a huge priority for me though since I personally don't use Tabs in work or fun projects much. Right now I am working on fixing the behavior, styles, bugs, and ES6 imports for my components in almost this order (I've already completed some of these):

• Typography
• Portal
• Accessibility
  • FakeAccessibleButton
  • FocusContainer
• ResizeObserver (and new ResizeListener)
• Link (also with better react-router support)
• Grid/GridList/Cell
• Divider
• Subheader
• FontIcon/SVGIcon/IconSeparator
• Button
• Avatar
• Badge
• Chip
• Forms (v1)
  • Label
  • Error
  • Message
  • TextField
  • TextArea
• Layover
• Menu/DropdownMenu/MenuButton (with portal support)
• Table (v1)
  • Table
  • TableHeader
  • TableFooter
  • TableBody
  • TableRow
  • TableCell (instead of TableColumn)
• Media
• List/ListItem/ListItemControl
• Dialog
• Transitions
  • Collapse
  • Others
• Toolbar
• Drawer
• NavigationDrawer/Layout
• Tooltip
• Ripple/Ink
• Card (and all parts)
• Progress (Linear and Circular)
• ExpansionPanel
• Forms (v2)
  • SelectField
  • Slider
  • FileInput
  • Checkbox
  • Radio
  • Switch
  • Autocomplete
• DatePicker/TimePicker
• Tabs/Tab/TabContainer
• Table (v2)
  • include the wrapper components for form elements and menus
  • TableCheckbox
  • DataTable - component for managing checkbox state if using built-in, and other niceties
• BottomNavigation
• Stepper
• Paper (this is one of the least useful components to me)

This is my priority list right now, but I am going to be writing an issue within the next few days with an updated roadmap of what I am planning on doing and how to make this project not stagnate while I'm working on stuff. It'll also be a good time for any other input from users/contributors of this library to give feedback about priorities. I think one of the biggest problems I'm running into right now is that I am working off of my own priority list instead of the community's (and I haven't made this project super contributor friendly yet) as well as feeling a bit of a burnout with the amount of work that needs to be done + full time job. So if there are things that are a lot more important than the fixes I want to do, the order might change a bit and do more patches until it's at a good state.