Time picker opens automatically

Question

I am using this time picker. It is working well but I noticed when I switch tab in browser after selecting time and return to the page the time picker it automatically opens again similar to this issue.

So after reading some previous posts I tried adding a hidden input field to absorb the focus and also tried using the jQuery blur method but with no success.

$('#timepicker').pickatime({
    onClose: function() {
        $("#timepicker").blur();
    }
});

HTML:

<div class="col-md-2 col-sm-6">
  <div class="form-group">
    <label class="sr-only">Select Time</label>  
      <div id="time_wrapper">
        <input type="text" class="form-control" id="timepicker" placeholder="Select time">
      </div>
  </div>
</div>

Is there any way to solve this problem? I have tried everything but can't get it to work.

Any help is really appreciated.

Answer 1

It seems that this time picker does not use your input element as one to focus on, and uses it's own instead. Try this

$('#timepicker').pickatime({
    onClose: function() {
        $(this)[0].$holder.blur();
    }
});