Datepicker closes modal unexpectedly

I have a modal element with a form integration. The Gravity Form I am using has a date picker in it. When I choose a current months date, the picker closes fine and the date is added to the input field. However, if i try to change the month or year in the picker this causes the modal to close but the date picker remains open.

Is there a way to keep the modal open and not close when changing the date picker?


Hi @designerken,

Thanks for reaching out.
Sometimes the only screenshot doesn’t help us to recognize the issue you are having. We need to examine your site to determine the cause of the issue. Can you please provide login credentials for your site in a secure note to examine it further, including:

– WordPress Site URL & Login URL
– WordPress Admin username/password

To create a secure note, click the key icon underneath any of your posts.

Thanks

@tristup

Sorry that the the original post was not sufficient. I cannot share access at this time unfortunately.

Hopefully this video will help highlight the issue more. I am sure that you can recreate this on your end with a form containing a date picker in a CS modal element.

https://tinyurl.com/2yg4px82

You will see the date picker modal works fine when selecting the date for the current month, but causes the main modal to close when you try to navigate the months/years within the date picker modal. We need a way to keep the CS modal open when navigating the date picker.

Hey @designerken,

It is really hard to determine the issue without checking the settings. It would be best to share with us the credentials like what my colleague asked so that we can check on your issue properly.

Thank you.

Sandbox created. Details in secure note.

Hi @designerken,

I have checked your staging site but didn’t find the page or post where you have added the modal. I have also checked but didn’t find the Schedule a Tour button as shown in the given video.
It seems that your live site is not been imported properly to your staging. I would request you to do that once again or you can create a similar page with a similar setup for investigation.

Thanks

@tristup

I recreated it on the site with no styles or fancy stuff to eliminate other issues. Just go to the test page (the only page on the site) and you will see a modal button that says “click me”. Did you even try?

it will open the modal with a form and a date picker.

Hi @designerken,

I have checked the page and found the issue you describe here. It seems that clicking into the specific sections and options it closes the modal. I will check with our development team on this and will add this to our Issue Tracker for further investigation.

Thanks

I’ve experienced on this on a couple of other modals. The problem is that any click outside the modal area, which the datepicker is technically not inside the modal, will close all modals. It’s something we have fixed in Pro 6.5 which we are releasing the beta this week, the change being that you have to click on the actual modal overlay to close it. I’d encourage you to check that out if possible when we release since this is a staging site right now and we’d love to get your feedback. The only other workaround I could give you is to use e.stopPropagation on all classes with ui-datepicker-prev and ui-datepicker-next. Or if GForms has a datepicker option to use the browser native datepicker that would also probably work. Have a great day.

@charlie

Thanks for the info. Sadly, the site is ready to launch minus this issue. I will need to find another workaround. I’d be happy to instal the beta once its live and test it with the form we are using.

1 Like

No worries, @designerken.

@charlie

I can confirm, this issue is resolved in the new beta release. (At least for me) Now let’s get the beta approved! LOL

1 Like

Hey @designerken,

We’re glad that it works on the new beta release.

Cheers!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.