Datepicker not initialised when in popup

Resolved daymobrew
(@daymobrew)

1 week, 6 days ago

I have a form with a DatePicker field. It works correctly in preview and when the form is in a page.

It does not work when I put it into a popup. I am using a Mai Popup block from BizBudding.

As a test I put the form inside a shortcode block within a <dialog> tag, to remove Mai Popup code from the equation. I have a <button> to open the <dialog> and the DatePicker field does not work.

Strangely, in the browser console there is a warning about the intlTelInput module: Uncaught TypeError: can’t access property “getInstance”, m.intlTelInput is undefined

My form does not have a telephone field, just a simple number field.

What do I need to do to get DatePicker working in the popup?

The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)

Plugin Support Jair – WPMU DEV Support
(@wpmudevsupport15)

1 week, 6 days ago

Hello @daymobrew

I checked the page you shared, and I can see that the Date Selector appears, but it’s behind the pop-up:

The way the pop-up displays, along with an invisible element behind it that detects a click event in order to close the pop-up, makes it not possible to click the elements of the Date Selector without closing the pop-up first. And unfortunately, the pop-up position in the document makes it not possible to bring the Date Selector above the pop-up by using custom CSS.

A workaround to this is to edit the Datepicker Field, and change the way the user can select a Date, using a selector or typing the date directly. Otherwise, I suggest you to reach the BizBudding team for a workaround, as this may require custom PHP/Javascript code.

Kind regards,
Jair.
Thread Starter daymobrew
(@daymobrew)

1 week, 5 days ago
The demo link used the native <dialog> tag so there’s no BizBudding code involved.

Thanks for the screenshot. It sounds like a z-index issue.

I found some old posts about DatePicker and modals and z-index issues: https://weblog.west-wind.com/posts/2009/sep/12/jquery-ui-datepicker-and-zindex (a CSS solution) or https://blog.pixelastic.com/2010/10/20/setting-zindex-jquery-ui-datepicker/ (a jQuery solution). I’ll give the CSS solution a try.

UPDATE: I see that there is already CSS in Forminator to have a high z-index (.ui-datepicker.forminator-calendar--default { z-index: 20000000; }) so that’s not the fix. Darn.

UPDATE: It seems that <dialog> opens in a browser’s ‘Top layer’ which is a different stacking order than z-index so no z-index number will beat it. https://stackoverflow.com/a/41816764

UPDATE: I just noticed that Mai Popups use <dialog> elements so I don’t think that there is a possible solution (except if Forminator provided a native <input type="datetime-local"> element).
- This reply was modified 1 week, 5 days ago by daymobrew. Reason: Add z-index test results
- This reply was modified 1 week, 5 days ago by daymobrew. Reason: Add note about browser Top layer stacking order
- This reply was modified 1 week, 5 days ago by daymobrew. Reason: Suggest datetime-local element
Plugin Support Imran – WPMU DEV Support
(@wpmudev-support9)

1 week, 4 days ago

Hello @daymobrew,

I hope you’re doing well.

I’ve reviewed the case again. The Popup plugin natively uses HTML < dialogue> instead of <div>, which seems to be causing the rendering issue. Currently, we don’t have anything for this.

Could you please review if the Form has enabled the Load From Ajax, if not please try on and see if that helps to resolve the issue? This can render the form using Ajax.
https://wpmudev.com/docs/wpmu-dev-plugins/forminator/#rendering.

Another option is custom work if you prefer to use the same Popup plugin, but unfortunately, we don’t provide that service here. If you prefer, you can use try any plugins from here: https://wordpress.org/plugins/tags/popup/

For that, you’ll need to hire a developer so they can provide the required custom code. WordPress offers a jobs directory here: https://jobs.wordpress.net/. If you need further advice, feel free to email wpsupport@incsub.com.

Subject: ATTN: WPMU DEV support – wp.org
Topic URL: https://wordpress.org/support/topic/datepicker-not-initialised-when-in-popup
–

Kind Regards,
Imran Khan

Thread Starter daymobrew
(@daymobrew)

1 week, 3 days ago

I changed the form Rendering setting to enable Load form using AJAX but the datepicker calendar is still behind the popup (note that my testing is using the <dialog> element, *not* a popup plugin).

Plugin Support Amin – WPMU DEV Support
(@wpmudev-support2)

1 week, 2 days ago

Hello @daymobrew

Unfortunately, since, custom coding is out of scope for our support and your popup is the issue here, we can’t help much, I suggest using a different popup for creating this.

You can try using our popup plugin, Hustle, to create this dialog.
https://wordpress.org/plugins/wordpress-popup/

Best Regards
Amin

Thread Starter daymobrew
(@daymobrew)

1 week, 2 days ago

In my opinion the issue is that jQuery UI Datepicker does not work correctly in a native <dialog> and obviously you cannot change that.

Forminator could consider changing its Date/Time/Datepicker fields to use the native <input type="date"> or <input type="time"> or <input type="datetime-local"> but it would mean a loss of some features.

Plugin Support Amin – WPMU DEV Support
(@wpmudev-support2)

1 week, 1 day ago

Hello @daymobrew

I will bring your suggestions to our Development team’s attention; however, I cannot give you any promises or ETAs for the implementation of the mentioned changes.

If the popup is implemented with native <dialog>, it uses the browser’s top layer.
Anything appended to body and layered with z-index can still appear under that dialog.
So a CSS-only z-index fix for the jQuery UI datepicker is often not enough.

Best Regards,
Amin

Viewing 7 replies - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.