Countdown component counts 2 seconds at once at the beginning

[netfaresi]

Describe the bug Countdown component counts down 2 seconds at once at the beginning.

To Reproduce I use version 4.5.2 but it can be also observed on the official documentation page.

Expected behavior The component should count down only one second at the beginning.

Desktop (please complete the following information):

• OS: MS Windows 10
• Browser MS Edge, Chrome, Firefox
• Metro Version first detected on 4.5.2 but also exists in actual version

[olton]

Try latest 4.5.12-rc11 (npm) or dev (4.15.12-rc12) from github

[netfaresi]

Thank you for the feedback.

Unfortunately the bug exists in the dev version, too. On the offical MetroUI documentation page the bug can be seen too.

[netfaresi]

UPDATE I tested it on my smartphone too and again the same result.

I tried to use another countdown timer and found this one from W3Schools:

https://www.w3schools.com/howto/howto_js_countdown.asp

I observed similar problem in this implementation. When I set the time for example to 10 seconds the countdown starts at 8. In order to exclude possible page load delay I put the code into a function and called it manually after the page hase been loaded. But still the same problem. The displayed values was always 2 seconds lower than configured value.

The difference between the W3schools version and Metro UI component is, Metro UI component shows at the start the correct count down time for example 10 and then jumps to 8 at first count. The W3schools version starts at 8 but counts correctly at first tick.

[netfaresi]

SOLUTION

It looks like there is a delay longer than 1 second during initial rendering of the value. I realized it while testing the W3Schools version of code. I configured the countdown to 22 seconds and logged each time the milliseconds which are used to calculate the remaining time parts. I saw:

22000 20982 19989 ...

Because Math.floor was used, the value 20982/1000 were rounded to 20 seconds after first tick. I replace Matho.floor by Math.ceil and the problem is solved.

**The problem is solved in the same way, after I replaced Math.floor with Meth.ceil in the line 187 in component.js file:

left = Math.ceil((this.breakpoint - now)/1000);**

I would fix the bug my myself in the repository but I am not familiar with the workflow how to create pull requests for bug fixings even enhancements or new component. If you extend your contribution guideline to a more detailed step by step guide, more developers with a bakcend background like me could conribute to the project.