SwipeableViews onChangeIndex event handler never called when used in the Tabs component

[zachsa]

Using Tabs with SwipeableViews, the first time a Tab is changed there is no sliding animation. This is the case in the Material UI documentation: https://material-ui.com/components/tabs/, and also in my own code.

I don't know if this is a problem with SwipeableViews or Material UI, but since the problem is present in the Material UI docs I thought it best to start here.

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

I've attached a giff that shows that the first time a tab is changed the swipeable animation doesn't fire (this is also the case in Material UI documentation as linked to above).

In my code:

<SwipeableViews
  axis="x"
  index={activeTabIndex}
  onChangeIndex={index => {
    console.log('cb fired', index)
    setActiveTabIndex(index)
  }}
</SwipeableViews>

I can see that the onChangeIndex handler doesn't ever get called.

Expected Behavior 🤔

The swipeable animation should fire on every change. And the onChangeIndex handler should be called.

[eps1lon]

Duplicate of oliviertassinari/react-swipeable-views#599

[oliviertassinari]

The regression has happened in v4.9.12...v4.9.13:

• v4.9.12: https://codesandbox.io/s/material-demo-forked-2mk65: OK
• v4.9.13: https://codesandbox.io/s/material-demo-forked-ugszv: KO

I could isolate the regression, coming from #20781. And more specifically:

      aria-selected={selected}
      disabled={disabled}
      onClick={handleChange}
-     tabIndex={selected ? 0 : -1}
      {...other}
    >

https://github.com/mui-org/material-ui/pull/20781/files#diff-ccf739a564e283358cc8ff2bf3556de13494bcc7696137998e8051446f20a65eR144.

I have no idea why. I'm proposing a fix on react-swipeable-view side, leveraging https://youtu.be/cCOL7MC4Pl0?t=1188.