When changing hour/minute/meridian input with keyboard then clicking on the parent input, input values revert to original value

[gavin310]

If you click the parent input to open TimePicki, then change either the hour, minute, or meridian input using your keyboard, and then click the parent input again, it reverts your new value back to the original value.

Another smaller issue is that when you click the parent input, open_timepicki is unnecessarily called twice.

I've described how I fixed these issues below. Maybe there's a better way to handle this?

Added a timepicki_open data property to the parent element and default it to false.

var ele_par = $(this).parents(".time_pick");
ele_par.data('timepicki_open', false);

Removed timepicki_open() call from document.onClick event. Also removed code that sets CSS position properties and moved it to the timepicki_open function. Check if TimePicki is already open when clicking the parent element, and if so call set_value() to apply values inputted using keyboard.

$(document).on("click", function(event) {
	if (!$(event.target).is(ele_next) && ele_next.css("display")=="block" && !$(event.target).is($('.reset_time'))) {
		if (!$(event.target).is(ele)) {
			set_value(event, !is_element_in_timepicki($(event.target)));
		} else {
			if (ele_par.data('timepicki_open'))
				set_value();
		}
	}
});

Check if TimePicki is already open before calling timepicki_open().

ele.on('focus', function(){
	if (!ele_par.data('timepicki_open'))
		open_timepicki();
});

In inputs.on('focus' function, add call to set_value() so that new input values are applied when tabbing between fields.

inputs.on('focus', function() {
	var input = $(this);
	set_value();
	if (!input.is(ele)) {
		input.select();
	}
});

In the open_timepicki function, add the CSS position code and set timepicki_open data property to true after fading in TimePicki.

function open_timepicki() {
	set_date(settings.start_time);
	ele_next.css({
		"top": ele_hei + "px",
		"left": "0px"
	});
	ele_next.fadeIn();
	ele_par.data('timepicki_open', true);
	...

In close_timepicki function, set timepicki_open data property to false.

function close_timepicki() {
	ele_next.fadeOut();
	ele_par.data('timepicki_open', false);
}