Time dropdown is off-screen when mobile keyboard opens up

🐛Bugs
1

Steps to reproduce

  1. Get a mobile phone. I’ve tested on Android. It’s probably reproducible on iOS and maybe even on a standard browser.
  2. Start typing a date, so that the datetime modal dialog shows up. Alternatively, tap on any already existing date.
  3. Tap on the “time” input field.

Expected result

The objective was is to open the list of suggestions and let me pick one. So, I expected I would be able to use my finger to scroll through the list of times (including the “all day” and “now”).

Alternatively, I would expect to get the Android native time picker (the nice clock that let’s me quickly set the time).

Actual result

The on-screen keyboard shows up and the entire dropdown list of suggestions is off-screen.

What’s more, scrolling will move the input field, but the list of suggestions stays off-screen, detached from the text field.

Environment

Which operating system are you using? Android
Which browser are you using? Official Dynalist app.
If you’re using a desktop or mobile app, what’s the version number of Dynalist? I don’t know, I couldn’t find it in-app (I looked at Settings and at Help).
Are you using any third-party scripts for Dynalist, e.g. PowerPack? No.

Additional information

Screenshot right after tapping on the time field
Screenshot right after tapping on the time field1080×1920 269 KB
Screenshot after scrolling
Screenshot after scrolling1080×1920 275 KB

Additional comments

The reason this happens is due to the custom JavaScript component ui-timepicker. If it were using the native HTML5 input fields, the browser would gracefully handle it itself.

If you would allow some suggestions, I’d say:

  • Please use <input type="time">. While on desktop browsers it may get some time to get used to use, on mobile browsers it should launch the native time picker.
  • You can even add a <datalist> with all the suggested times, and it will somewhat replicate the current behavior.
  • We could have a button “Now” that would set the time to now.
  • Likewise, we could have a button for “all day” that would clear the input field. Visually, this could be similar to the “make date range” link.

I understand the native HTML5 component has some drawbacks, but I believe in this case the UX has the potential to be better.