Openfoodnetwork: flatpickr date-time-picker: Usablity issues for users on [mobile + Firefox]

[filipefurtad0]

Description

After implementing the new flatpickr date-time-pickers, it was noticed, while testing PR #6691 that these changes introduce a regression for Firefox users, on mobile devices: The user can click on the desired date and time, but cannot close the calendar, which takes up the whole screen.

Expected Behavior

Selecting the desired dates inserts this info in the desired fields; After this, the calendar closes. (previously, the "Done" button was used for this purpose.)

Actual Behaviour

The used cannot update the date-time fields.

Steps to Reproduce

1. Choose an Android device on Browserstack.
2. Choose the browser Firefox.
3. Login as admin, and Order Cycles page /admin/order_cycles
4. Try to open or close an order cycle, by changing the Open/Close dates.

Or:

1. Visit https://flatpickr.js.org/examples/
2. Click DateTime

Animated Gif/Screenshot

Firefox, on Android 10 Samsung Galaxy S20:

The same device, visiting the page https://flatpickr.js.org/examples/ and clicking

Workaround

Rotate the phone 90 degrees.

Severity

bug-s3: a feature is broken but there is a workaround

Your Environment

• Version used: v3.5.7
• Browser name and version: relevant for Android devices in Firefox
• Operating System and version (desktop or mobile): Mobile

Possible Fix

[RachL]

@filipefurtad0 with @jibees 's feedback here https://github.com/openfoodfoundation/openfoodnetwork/pull/6691#issuecomment-777004308 I think we can lower the severity. Also I think we should open this issue on their repo (as well), what do you think? I've been browsing their firefox issues but now I'm not 100% sure they do have exactly this one.

[filipefurtad0]

Opening an issue on their repo is a good idea @RachL :+1:

[filipefurtad0]

And yes, I guess downgrading is ok, we're assuming not many users are affected.

But I'm wondering @RachL @jibees if we have numbers to demonstrate this? I remember discussing 25% of admin visits coming from smartphones, at some point. Does this scale, to other instances? What is the share of Firefox users on mobile, in OFN? For example, I'm not sure this affects iPhone users using Firefox as a browser (Browserstack does not offer this combination).

[RachL]

@filipefurtad0 this number applies only to FR. Other instances are under 15%. On this share, firefox is not the most used browser. Chrome comes first. Again in FR Firefox seems quite used, but on other instance Firefox is far from being the top browser used. So yes this is not a really severe issue for us.

[filipefurtad0]

Cool, thanks for clarifying Rachel :+1: