Datepicker created on focus does not open on initial focus with jQuery 4.0.0 (opens after blur/refocus)

[tagliala]

Hello,

apologies if this issue does not belong here, I'm not a JavaScript developer

When creating a jQuery UI Datepicker lazily in a delegated focus handler (attach datepicker on focus the first time), the datepicker opens immediately on first focus with jQuery 3.7.1. With jQuery 4.0.0 the datepicker is created but does not open on that initial focus; it only opens after you blur and focus again.

Reproducible test case

• ❌ Not working (jQuery 4.0.0): https://jsfiddle.net/tagliala/vu1jg82p/3
• ✅ Working (jQuery 3.7.1): https://jsfiddle.net/tagliala/vu1jg82p/7/

Minimal repro

HTML

<input placeholder="To" value="" size="12" class="datepicker" maxlength="10" type="text" name="q[created_at_lteq]" id="q_created_at_lteq">

JS

(($) => {

  $(document)
    .on('focus', 'input.datepicker:not(.hasDatepicker)', function() {
      const input = $(this);

      // Only create datepickers in compatible browsers
      if (input[0].type === 'date') { return; }

      const defaults = { dateFormat: 'yy-mm-dd' };
      const options  = input.data('datepicker-options');

      input.datepicker($.extend(defaults, options));
    });

})(jQuery);

Steps to reproduce

1. Open the jQuery 4.0.0 fiddle: https://jsfiddle.net/tagliala/vu1jg82p/3
2. Click the input (initial focus)
3. Click outside (blur)
4. Click the input again

Expected

• Datepicker should appear when the input is focused (on step 2) — every time the input is focused after creation.

Actual

• On jQuery 4.0.0 the datepicker does NOT appear on the initial focus (step 2). It only appears after blur and refocus (step 4).
• On jQuery 3.7.1 the datepicker appears on the first focus as expected.

Can the jquery-ui team confirm whether this is:

1. an intended behavior change in jQuery 4 that jquery-ui should adapt to, or
2. a regression that jquery or jquery-ui should address so create-on-focus patterns still show the datepicker on the very first focus?

Thanks for any help you can provide

[mgol]

Thanks for the report and a really good test case!

I initially thought there may be an issue with bubbling focus events to document in jQuery 4.0.0 since the focusin event - which we use to implement event delegation for focus - works differently (tech details: we no longer shim focusin via a capture-phase focus but rely on a native focusin event), but I see the bubbling does happen. Something must be different in how the datepicker gets initialized.

I have a suspicion of what it might be, I'll continue digging. Most likely it's going to require a fix in jQuery UI.

[mgol]

OK, I debugged the issue and I think the issue is primarily in the code using jQuery UI, not in jQuery UI or jQuery itself.

Summary

It's not supported to rely on the Datepicker showing immediately after initialization if it's done in a focus handler as the event is not guaranteed to fire in such a case. It's not supported with jQuery 3.x either!

To make sure the focus handlers actually fire, invoke .triggerHandler('focus') the datepicker is shown immediately, invoke .datepicker('show') after initializing the datepicker:

• with jQuery 4.0.0: https://jsfiddle.net/m_gol/pkhxLtf0/3/ https://jsfiddle.net/m_gol/pkhxLtf0/4/
• with jQuery 3.7.1: https://jsfiddle.net/m_gol/dgchyswL/6/ https://jsfiddle.net/m_gol/dgchyswL/7/

I am considering adding this behavior in a future version, though - so that the datepicker checks after initialization if the input is focused and if it is, show the UI.

Explanation

The way the datepicker functions by default is that it shows up when the input gets a focus event. However, it does not open if the input already has focus! You can see that in my modified fiddles:

• with jQuery 4.0.0: https://jsfiddle.net/m_gol/pkhxLtf0/2/
• with jQuery 3.7.1: https://jsfiddle.net/m_gol/dgchyswL/4/

In both those test cases you'll get the datepicker opened only on the second focus. This means initializing the datepicker inside of a focus handler will not generally immediately show the datepicker. The code from your test cases is unsupported.

So why did your test case work with jQuery 3.7.1? It's because of a technical detail in how jQuery implements delegated handlers.

Technical details

Because some common events do not bubble and delegated events are really events attached higher in the document tree that just check if event.target matches a provided selector, normally delegated handlers for non-bubbling events such as focus or mouseenter would not work at all. To make it easier, jQuery maps those events to their bubbling equivalents and listens for those instead. For mouseenter that means listening for mouseover; for focus - listening for focusin.

This means that your delegated focus handler on document is really attached as a focusin handler. That in itself would not make it work, since focusin fires after focus in all modern browsers - and that's why it doesn't work with jQuery 4.0.0. But when jQuery 3.0.0 arrived not all browsers supported focusin natively - namely, Firefox - so jQuery 3.x emulates it by attaching... a focus handler, just in the capture phase. jQuery 4.0 no longer shims focusin as documented in its upgrade guide.

So, in jQuery 3.x, a delegated focus handler is turned into a focusin handler, which is turned into a capture-phase focus handler. Capture-phase handlers fire on ancestors before the regular bubble-phase ones fire on the final target. This means the datepicker init code attaches a focus handler showing the datepicker UI shortly before focus actually fires on the input, which makes that handler run when focus reaches the input. In jQuery 4.0, where focusin runs natively, no focus event will follow it, so the handler will not run.

[tagliala]

Thanks @mgol for the thorough explanation, really appreciate

I've fixed this on ActiveAdmin's side and I'm closing here, maybe this will be helpful for googlers