time picker doesn't work on Firefox mobile

[UltimateRiff]

when I try and select a time (both with the combined and seperate date/time pickers), it doesn't let me choose an hour or minute, only seconds for the current time.

I'm on Android with Firefox. I will also note it does work properly on Chrome

[DJDavid98]

I added a temporary workaround that disables the seconds part of the input only on mobile Firefox, I hope that will be enough to make the site at least mostly usable without having to resort to a different browser.

The only caveat of this is that pressing the "set current time" button will set a timestamp with the seconds of the current system clock but you will not be able to change the seconds due to this restriction. Still a better trade-off than not being able to change the other two components at all, so I'll leave it at that for now.

[xobs]

I couldn't get it to work at all today either - the "set" button on the picker would just set the current time, and the fields themselves weren't editable.

[DJDavid98]

This is an issue in the Firefox Mobile browser and it seems to get worse by the day. Unfortunately your options are to use a different browser, or alternatively you can give https://sledgehammerti.me/ a try. It's a work-in-progress alternative site where I'm planning to have fully custom components for date and time input that should hopefully not be affected by bugs like this. Its UI is still very much in the early stages, but the very basic functionality works at least. Until that project is done and replaces this one, I expect this issue to remain open.

[xobs]

I did check, and hammertime.cyou works now with the "custom components", which I see is now implemented.

Still, I fixed the native component on Firefox by applying this patch:

diff --git a/src/components/TimestampPicker.tsx b/src/components/TimestampPicker.tsx
index 136f268..a964b74 100644
--- a/src/components/TimestampPicker.tsx
+++ b/src/components/TimestampPicker.tsx
@@ -88,12 +88,15 @@ export const TimestampPicker: FC<PropTypes> = ({
   );
   const handleDateTimeChange: InputChangeHandler = useCallback(
     (value) => {
-      onDateTimeChange(
-        value &&
-          (value instanceof Date
-            ? momentToTimeInputValue(moment(value), `${isoFormattingDateFormat} ${isoTimeFormat}`)
-            : value?.target.value),
-      );
+      var newDate = value &&
+      (value instanceof Date
+        ? momentToTimeInputValue(moment(value), `${isoFormattingDateFormat} ${isoTimeFormat}`)
+        : value?.target.value);
+      // Firefox Mobile on Android sends a second onChange event with an empty string. Ignore it.
+      if (typeof newDate === 'string' && newDate.length === 0) {
+        return;
+      }
+      onDateTimeChange(newDate,);
     },
     [onDateTimeChange],
   );

Basically, ignore an update where the value is an empty string.

[DJDavid98]

The custom input uses a slightly different way of providing the time value (that's the branch that used Date instances), I guess that may have helped. Regardless, I made an attempt to apply your fix, I'm looking for feedback on whether the issue is now resolved.

[DJDavid98]

Had some difficulties debugging this, but as far as I can tell the issue was that the input value was being set without seconds after I removed the step attribute to fix the original issue. I just adjusted the code to pad the time input value with seconds if it's too short, and it seems to have fully resolved the issues on my device, regardless of input type.