Material-ui: Animate Tab and selection box problem

[kinwai]

Expected Behavior

I am using the tab with "react-swipeable-views" animation like the example https://material-ui-next.com/demos/tabs/#fixed-tabs. And I use the selection box like the example https://material-ui-next.com/demos/selects/#simple-select under the tab content.

I expect the switching animation can be shown as the tabs example.

Current Behavior

The current behavior is there is no animation for the first switching action. But after the first switching, everything is work as expected including the animation.

If I change the simple selection box to native selection box, the animation also works well.

So, the problem occurs if I use the tabs with "react-swipeable-views" and the simple selection box together.

Steps to Reproduce (for bugs)

Demo: https://codesandbox.io/s/zwm62j8j1x

• Switching tabs (Only the first switch is no animation)
• Refresh page to reproduce the problem

Environment

| Tech | Version |
|--------------|---------|
| Material-UI | 1.0.0-beta.37 |
| React | 16.2.0 |
| react-swipeable-views | 0.12.12 |

[oliviertassinari]

Related to https://github.com/oliviertassinari/react-swipeable-views/issues/417

[kinwai]

Problem solved by downgrading the react-swipeable-views version to 0.12.4

[Karmello]

with 0.12.4 problem gone

[oliviertassinari]

The root of the issue is in this line.
https://github.com/mui-org/material-ui/blob/e199c9fb70622b8a2b4bf42ff6af22029ada2ea6/src/Select/SelectInput.js#L266
We are asking the browser to perform layout computation during the animation with displayNode.clientWidth. It's consistently behaving on the latest version of Firefox, Chrome and Safari. I'm preparing a fix. It's simple.

[derekcannon]

I believe this is a problem still/again. Here's a demo with material-ui 1.1.0 and react-swipeable-views 0.12.13:

https://codesandbox.io/s/p95332j6z7

[frostbytedata]

I have the same symptoms with the following versions:

"@material-ui/core": "^1.2.0",
"@material-ui/icons": "^1.1.0",
"react": "^16.4.0",
"react-dom": "^16.4.0",
"react-router-dom": "^4.2.2",
"react-swipeable-views": "^0.12.13"

[HriBB]

I can confirm this. Downgrading does not help.

[oliviertassinari]

I can confirm too.

[oliviertassinari]

The behavior was fixed in #10706 but broken in #10956.

[oliviertassinari]

This comment might explain the source of the issue: https://github.com/reactjs/react-transition-group/issues/10#issuecomment-287463848.

[jcroft]

I am having this same issue with the following versions:

"@material-ui/core": "^3.9.3",
"react": "^16.8.6",
"react-swipeable-views": "^0.13.1",

If anyone has any suggestions, I'd be eternally grateful! Thanks!

[kamami]

Same issue with:

    "@material-ui/core": "^4.3.0",
    "react": "^16.8.0",
    "react-swipeable-views": "^0.13.3"

Downgrading to 0.12.4 did not help...

[justdvl]

"The current behavior is there is no animation for the first switching action." same problem.. any fix?

EDIT: I figured a ugly fix. to main css file (index.css) I add:
.react-swipeable-view-container {
transition: transform 0.35s cubic-bezier(0.15, 0.3, 0.25, 1) 0s !important;
}

It seems to me that the reason why animation is not at the very first load is this: if it was, and you starting off with different than 1st view selected (using index prop for , on the very first load the animation would be triggered. Which happens with this fix now.

[seba9999]

@justdvl
Well using you fix when the tab should always start to the first tab (which is my case) seems enough ... Thanks :)

[jfosterdavis]

"The current behavior is there is no animation for the first switching action." same problem.. any fix?

EDIT: I figured a ugly fix. to main css file (index.css) I add:
.react-swipeable-view-container {
transition: transform 0.35s cubic-bezier(0.15, 0.3, 0.25, 1) 0s !important;
}

It seems to me that the reason why animation is not at the very first load is this: if it was, and you starting off with different than 1st view selected (using index prop for , on the very first load the animation would be triggered. Which happens with this fix now.

Attempted in "react-swipeable-views": "^0.13.3" with no joy. @justdvl