Question

I have a jQuery datepicker that when visible has buttons that overlap some input buttons. When I go to click on the datepicker, the popup disappears and the input button is selected — rendering the datepicker pretty unusable.

Is there a way to keep the jQuery overlay in the foreground and have it take precedence over the buttons behind it?

Answer 1

If you genuinely think it’s a behaviour bug in your target browser (ie. it SHOULD work the way you’ve written it, but it just isn’t), you can compensate for it by targeting the ‘hidden’ input button and preventing default on its behaviour. This strikes me as a hack, and I can’t see why datepicker won’t work by default or with alexdlaird’s suggestion but sometimes we have to hack to fix usability bugs!

$('.myInput').click(function() {
  return false;
});

where .myInput is not literal but rather any other selector that targets your input.