Poss bug - Datepicker dropdowns in modal not working on Safari(IOS)

Wappler General Bugs
#1

In IOS clicking the dropdown select option zooms the page but does not initiate the dropdown.

Add a datepicker input to a page, select the ‘Show Dropdowns’ option and try on IOS

Here’s the code for my element:
<input id="inp_memberdob1" name="memberdob" class="form-control" placeholder="dd/mm/yyyy" is="dmx-date-picker" dmx-bind:value="getmydetails.data.getmydetails.memberdob" format="DD/MM/YYYY" showdropdowns="true">

The date picker generally works and you can select a date (so it seems css/js/jquery) prerequisites are in place), it is just the dropdowns that don’t.

Pause new features and fix bugs/issues please!
#2

This is still causing me problems when trying to use datepicker - if it doesn’t work on IOS Safari, I can’t use it! Any chance it can be looked at?

#3

Hi Ben,

Do you have a live link we can test? What do you mean by ‘doesn’t work’? Maybe some screenshots or something?

#4

I’m just firing up Xcode simulator so I can try and get a video.

I’ve just set up a page at https://club-ed.co.uk/test.html where you can see it

The issue appears to be when a datepicker is used in a modal. There is a datepicker on the main page which works ok but the one in the modal doesn’t allow the dropdowns or time picker to work.

#5

Screen Recording 2020-10-05 at 19.56.12

#6

You never mentioned you are trying to use the date picker in the modal in your initial post. Please make sure to properly log your bug reports, as there is no way we can guess you are using this in a modal!

Please check:

Seems that the tabindex attribute in modal code causes this. Please remove it and try again.

1 Like
#7

Whoah! I didn’t realise that the modal was was the issue! Do I need to mention every component on the page every time I raise a bug report, just in case???

The tab-index did indeed fix the main issue. There is still an annoying little issue whereby the datepicker zooms when selecting a dropdown, often putting the apply button out of view. You can move it around to get it back in view but click anywhere other than on the picker and it disappears. Now that’s OK if you know about it but will quickly put off end users. Can we get a ‘do not close on click’ option (similar to modals) for date pickers? If you want me to raise it on a separate feature request, please let me know.

#8

Well, usually modals, collapses, tabs, initially hidden regions and other weird components like these cause issues with other components like date picker, swipers, slideshows, google maps etc used inside them. So it’s nice to mention if you are using them.

Not sure what causes the zoom issue on ios/safari - could be a bug there (safari has its own weird issues). Will have to check this.

1 Like
#9

Thanks @Teodor,
It was an issue I had seen on a few forms (just didn’t realiser they all happened to be in modals) so thought it was a general issue. I promise to mention it next time :kissing_heart:

#10

For housekeeping, the removal of tabindex did not work for me on this issue in BS5. A number of tricks can be attempted, including overriding the _enforceFocus function for firefox user agents, as covered here:

However, in the end, what worked for me was simply adding the nofocus=“true” attribute to the parent modal. This was enough to stop bootstrap and firefox fighting over the focus enforcement between the modal and the datepicker.

#11
#12

The focus trap of the bootstrap modal seems to be causing the issue, the scripts tries to prevent focus on elements outside of the modal and the datepicker dropdown is placed in the body.

You can test the following update of the datepicker, it should look for the closest modal and use that as parent container.

dmxDatePicker.zip (8.9 KB)

#13

Thanks a bunch @patrick was just leaving breadcrumbs here for future searchers, for my app the nofocus fix was completely sufficient.

For giggles, I swapped the datepicker.js out with your test version, but unfortunately the picker would no longer display at all (triggered by the default action of clicking in the input field) within the modal. FYI I’m on 5.8.2 on Nodejs.

#14

The update works only if you have the beta extensions selected.

#15