Regression in Progress component when updating to bootstrap 4.0.0 final

[stefanb2]

Issue description

• components: Progress
• reactstrap version 5.0.0-alpha.4 & 5.0.0-beta
• import method es (I guess that means import { Progress } from 'reactstrap';)
• react version 16.2.0
• bootstrap version 4.0.0-beta.2 & 4.0.0

What is happening?

I have started my project with Bootstrap 4.0.0-beta.2 and Reactstrap 5.0.0-alpha.4. I have a progress bar that gets continuously updated from 0 to 100% in steps and then is reset to 0% for the next cycle. So far so good:

• the bar is continuously increasing from 0 to 100%
• the bar jumps back to 0% on start of the next cycle, i.e. when this.setProgress(0) is executed

Now I update my project to Bootstrap 4.0.0 final and I see

• the bar is continuously increasing from 0 to 100% (OK)
• the bar shrinks slowly back towards 0% on start of the next cycle (REGRESSION)

Updating to reactstrap 5.0.0-beta does not fix the issue

Neither the bootstrap nor the reactstrap documentation mentions a parameter that controls the animation of progress bar changes (animated= controls the animation of the progress bar fill pattern, i.e. crawling or not).

What should be happening?

Progress bar should jump back to 0% when this.setProgress(0) is executed.

Steps to reproduce issue

See below for my component code

1. this.setProgress(0)
2. this.setProgress(10)
3. this.setProgress(20)
4. ... and so on...
5. this.setProgress(100)
6. this.setProgress(0)

Error message in console

No error message.

Code

Here is the gist of my code. The rest of the component code is concerned only with calculating the percentage value:

import   React             from 'react';
import { Progress        } from 'reactstrap';
...
export default class AutoProgress extends React.Component {
    constructor(props) {
        super(props);

        // initialize state
        this.state = {
            value: 0, // in percent as max === 100
        };
    }
...
    setProgress(percent) {
        this.setState({ value: percent });
    }
...
    render() {
          return (
              <Progress
                   max="100" // -> value = 0..100%
                   striped
                   value={this.state.value}
              />
          );
    }
}

i.e. other places in the component simply call e.g. this.setProgress(0) to change the progress bar value.

[stefanb2]

Here is a small screen capture showing the "shrinking" animation as mp4 video: Bootstrap4.0.0-reactstrap5.0.0-progress.mp4.gz (compressed with gzip as github does not allow .mp4)

BTW: I've tested my application with Chromium 63 and Firefox 58 on Linux. Both show the same behaviour.

[stefanb2]

It seems that my intended behaviour was considered "broken" by Bootstrap (twbs/bootstrap#24643) and "fixed" (twbs/bootstrap#24694).

Solution is to override a bootstrap 4 variable in your .scss file, e.g.:

// override Bootstrap 4 variables
$progress-bar-transition: unset; // disable progress bar animation

// Bootstrap 4
@import "bootstrap/scss/bootstrap";

Closing as this is obviously not a reactstrap issue.

[seladb]

Could you please describe how you solved this issue?

This issue still happens to me using React Bootstrap