Unexpected behavior on timer focus/blur

[elaman]

Plugin does not recognize intentional and unintentional focus and blur events.

For example.

1. I pressed "Start" button.
2. I pressed "Stop" button.
3. Focus on timer input field and change value.
4. Switch focus away from timer input field.
5. Timer will unexpectedly start. It shouldn't since we stopped it in step 2.

[walmik]

Hi there, the start and stop buttons are not a part of the plugin. They are added only for the demo.

If you set editable: true while initializing the timer on to an element, then the input field will have the events bound to focus and blur.

Having said that I ll leave this issue open and fix the 'demo' (the plugin does not need any change for this)

Please do let me know if this has addressed your query correctly.

[elaman]

While Start and Stop buttons are not part of the plugin, focus and blur events are hardcoded into the plugin.

This causes an issue, when you can't get clear control over the state of the timer. If I want user to be able to edit timer value, anytime user focused/blurs timer input it will fire timer resume/pause event.

[walmik]

To summarize, the user should be able to pause/resume the timer for editing the time but not necessarily on blur/focus events. If that s what you mean, then this is a good thought. I ll mark this issue as an enhancement.

Needless to say, you re free to suggest ways to implement this behavior or even submit a PR for the same. If it complies with the existing code without breaking any tests, I can accept and merge it. If you re not up to it then I ll add this feature as soon as I get some time.

Thanks for noting this!

[walmik]

On further thought I realize, we can leave the editable property as is so that people who need it, can use it out of the box. If you dont want this auto pause and start to happen then here s what you can do:

Initialize the timer on a text input field. Do not initialize the plugin with editable set to true. Create an event handler to pause the timer (either on clicking a button or focussing the input field):

$('input#timerDivId').on('focus', function() {
    $(this).timer('pause');
})

Then the user can edit the text. Since the use case is such that resume timer should not kick in on blur, attach an event to a click of a button that resumes the timer again:

$('#saveBtn').on('click', function() {
    $('#timerDivId').timer('resume');
});