Long Progress Bar Animation Time When Reducing Steps in Stepper

[Lucio]

I've got a use case where the number of steps in a vertically oriented stepper are dynamic.

If the number of steps is decently high (like, above 10) and the current step is also high, reducing the number of steps to a small value causes a very long and weird looking animation of the progress bar.

Here is a stackblitz demonstrating the issue

 

Turning off animations or reducing the time would mitigate this problem, but I think the animations are nice to have, especially when progressing through the stepper in a more traditional fashion.

 

 

[Georgi]

Hi Lucio,

Thank you very much for the details provided.

Based on the information provided in the thread and the attached runnable example, I indeed managed to reproduce the weird behavior of the Stepper animation when the developer tries to dynamically remove some of the steps displayed in the component and reset the current step to one of the remaining ones.

Having consulted our team on the matter, it turned out that the current behavior of the Stepper component is indeed a bug on our side. For this reason, I logged an issue in our public GitHub repository, and what I would suggest would be to subscribe to it in order to track the resolution process:

• https://github.com/telerik/kendo-angular/issues/4433

In these lines of words, I would like to apologize for any inconvenience that this unexpected behavior might be causing.

With that being said, what I would suggest as a possible workaround would be for the developer to reset the current step inside a setTimeout():

setTimeout(() => {
    this.currentStep = 1;
});

To better illustrate the suggested approach, I am sending you a StackBlitz demo that implements it:

• https://stackblitz.com/edit/angular-9trgiw-zw78fs

Please, let me know if I can further assist you with this case.

Regards,
Georgi
Progress Telerik