Input field-only does not work with allowInputToggle

[yihangho]

When using the date time picker with only the input field (i.e., no icon, https://tempusdominus.github.io/bootstrap-4/Usage/#no-icon-input-field-only), and allowInputToggle set to true, the date time picker will flicker when the input is clicked:

See this video for a demo: https://streamable.com/0n47c
Example: https://jsfiddle.net/bdxss6m8/770/ (HTML markup lightly edited from the example taken from the site)

My hypothesis is that in the input field-only context, we're listening to both the click and focus events on the same element (i.e., the input field), somehow, the focus listener is triggered first followed by the click listener. When this happens, the focus listener calls show (thereby showing it) while the click listener calls toggle (thereby hiding it).

For others who are facing this issue, I have a temporary userland workaround by not using allowInputToggle, but listening to the focus event, and decide if it is triggered by a click (ignore if it is):

var selector = '#datetimepicker';

$(selector).datetimepicker(); // Not setting allowInputToggle to true

var clickedBegan = false;

$(selector).mousedown(() => {
  clickedBegan = true;
});

$(selector).focus(() => {
  if (clickedBegan) { // Focus due to a click
    return; // Ignore since it will be handled by the library
  }

  $(selector).datetimepicker('show');
});

$(selector).mouseup(() => {
  clickedBegan = false;
});

// This workaround relies on the fact that focus due to a click will fire mousedown, 
// focus, and mouseup, in that order.

[AvaelKross]

I have the same issue. I guess I've set allowInputToggle to true to be able to open the timepicker on click, but even after removing this option I can open it on click.. Weird :) So for me the solution was just to drop this option from the config

[yihangho]

@AvaelKross Interesting. Do you mind sharing your code with me? (Just the parts that are related to the time picker will do.)

[ouija]

I recently started using this datepicker on a project and have just run into this same behavior; I'd like for tab-based events to display the datepicker when the field is focused by way of pressing the tab key (for accessibility purposes), and using the allowInputToggle setting works to enable this, but it causes issues with the datepicker from appearing when clicking directly on the field itself.

The solution by @yihangho does resolve this behavior, and I wanted to request that this type of soultion get merged into the plugin at some point, as I feel it should be the expected behavior when using the allowInputToggle setting.

Thanks!