ProgressButton does not stop when calling stop() after pressing Enter key

[Youssef Juma]

Hallo,

We have encountered an issue with the progressButton component in our form. When the button is activated by clicking with the mouse, calling stop() method works as wxpected and the progress animation stops. However, when the button is triggered by pressing the Enter key(keyboard activation), calling stop() deos not stop the progress animation.

Please advise if there is a work around or if this can be fixed in future release.

Thank you in advance!

Best Regards,
Youssef Juma 

[YuvanShankar Arunagiri]

Hi Youssef,

We have validated your reported query with the Progress button component, while using the stop and progressComplete function of the progress button works properly on our end (both mouse click and enter key action). Kindly refer to the below code snippet and sample link.

<div class="col-xs-12 col-sm-12 col-lg-6 col-md-6">

                        <ejs-progressbutton ref="progressBtn" content="Spin Left" :isPrimary="true" duration=15000 :enableProgress="true"></ejs-progressbutton>

                    </div>

…..

 handleStop() {

            this.$refs.progressBtn.stop();

        },

        handleComplete() {

            this.$refs.progressBtn.progressComplete();

        }

Sample link: https://stackblitz.com/edit/afefhsr5?file=src%2FApp.vue

Output screenshot:

If we misunderstood your query about the progress button, kindly share the code snippet or sample of the progress button component along with a video demonstration for better understanding.

Regards,

YuvanShankar A

[Youssef Juma]

Hi  YuvanShanka,

Thank you for your reply

It seems in your output screenshot that the button stops only when the complete button is clicked and so only when the  this.$refs.progressBtn.progressComplete();    is that right? 

If so what is the point of calling  this.$refs.progressBtn.stop();   ? 

Thank you in advance!

Best regards,
Youssef Juma 

[YuvanShankar Arunagiri]

Hi Youssef,

Based on your reported query regarding the purpose of Progress Button methods:

• progressComplete(): This method is used to complete both the spinner action and the progress animation of the Progress Button.
• stop(): This method stops only the progress animation at its current stage. However, it does not stop the spinner animation — the spinner will continue until the Progress Button action is fully completed.

This is the intended behavior of our Progress Button component.

UG link: https://ej2.syncfusion.com/vue/documentation/progress-button/spinner-and-progress#start-and-stop-methods

Regards,

YuvanShankar A