Bug report: Date and time fields on Android

Date and time fields could fail to open their pickers on Android phones, particularly when using Firefox. This issue has been fixed, and we have also made the date picker appear where you expect it to on desktop computers.

A customer recently let us know that date and time fields didn’t work on a co-worker’s cell phone. Pressing a date and time field did nothing, making it impossible to enter a date.

When we investigated, we found that date and time fields had stopped working reliably on Android. Firefox was hit the hardest. Pressing a date and time field didn’t bring up the date picker, and instead revealed placeholder text (“mm”, “dd” and “yyyy”) that was supposed to remain hidden. Chrome fared better, as the date picker did appear for us, but a calendar icon now showed up on top of the field where none had appeared before.

On our customer’s phone, though, Chrome didn’t work either. Since our own Android phones worked fine with Chrome, we added a special diagnostics panel to a test version of Calcapp and asked our customer to try it out. The information they sent back allowed us to track down the problem.

What happened?

On iPhones, iPads and Android devices, date and time fields use the date and time pickers built into the device. They are familiar to users and work well with touchscreens. On desktop computers, Calcapp uses its own date picker.

Calcapp builds on a third-party code library which, among other things, takes over the handling of taps on touchscreens. This library was originally needed to make apps respond quickly to taps, as phones once introduced a noticeable delay before responding. In doing so, though, the library intercepts taps and replaces them with simulated taps of its own.

For most parts of an app, the difference doesn’t matter. However, browsers are careful about showing date pickers, and only reliably do so in response to taps made by actual users. Depending on the browser and the phone, the simulated taps were sometimes not enough to bring up the date picker, which is why date and time fields worked for some users but not for others.

We have changed date and time fields so that taps on them reach the browser directly, without passing through the library. Date pickers now appear reliably on Android, using both Chrome and Firefox. We have also made sure that the placeholder text and the stray calendar icon remain hidden.

Our customer has confirmed that date and time fields now work on their co-worker’s phone.

A bonus fix for desktop computers

While we were working on date and time fields, we also fixed a long-standing annoyance on desktop computers. When a browser window took up the entire screen, the date picker would appear all the way to the right of the window, regardless of where the date and time field was located. The date picker now appears directly below the field you clicked.

Let us know

There are a great many phones and browsers out there, and they change frequently. If something doesn’t work as you expect it to, please let us know. As this bug report shows, your reports make Calcapp better for everyone.

« Tip: Role-driven drop-down filtering