[Bug]: Date Picker on iPhone does not work properly

[JoshTheHero]

What happened?

When looking at the date picker on an iPhone, the field will not come up properly and will not let the user select a date. This does not happen on Android or Desktop. Tested with the default Theme with a basic self service registration form.

https://github.com/user-attachments/assets/3dda0b11-4bf3-4d04-90c8-d6031e4151e9

Version

1.57.0

Affects Versions

No response

Alternatives / Workarounds

Use a different date picker from the default FusionAuth one.

[robotdan]

Interesting.

Can you confirm this is on a new or re-built current them or simple theme? We should be using the native browser date picker, so not sure how we could be breaking it. Some of the older themes may have been using our date picker which we have sunset.

But perhaps we are?

[markbennett1973]

Is there an update on this issue? We are having the same problem (also on iPads). The problem is that the registration form initially renders date inputs as <input type="text">, presumably so it can show placeholder text describing the purpose of the form field. A javascript function then dynamically changes the input type to date in an onFocus event:

document.querySelectorAll('.date-picker').forEach(datePicker => {
  datePicker.onfocus = () => datePicker.type = 'date';
  datePicker.onblur = () => {
    if (datePicker.value === '') {
      datePicker.type = 'text';
    }
  };
});

This is known non-working behaviour in iOS/iPadOS Safari. According to ChatGPT (source unknown):

Safari’s date picker is implemented at a low level (UIKit control), and it’s only attached when:
 - the input is created with type="date", or
 - the element’s type changes before it receives focus.
When you change the type on focus, Safari has already decided which keyboard/UI to show — it doesn’t reinitialize the picker UI afterward.

We are using an advanced theme, so should be able to rewrite the html and javascript to correctly switch between the text input and the date input. But this functionality should really work out of the box across all major devices and browsers.