BUG: v.5.10.8 Does not respect 24-hour time setting

[exstntlmsnthrp]

I've recently upgraded to v.5.10.8 and the 24-hour time setting in Localization settings is not respected from previous settings. I have toggled the switch off and saved, then toggled on and saved multiple times. While it initially reset back to 24-hour, after a browser refresh or changing tabs, it reverts back to AM/PM.

Tasks:

API: 5.10.8 (Self-hosted)
UI: React
Browser: Firefox & Chrome

If you need additional information, please let me know.

[turbo124]

@exstntlmsnthrp we use the browser defaults for this, so the 24hr time toggle actually has no impact on this particular field.

[exstntlmsnthrp]

Thanks for the quick reply @turbo124. I'll have to look into this. With the exception of my actual timezone, the rest of my PC locale is set to IE and uses 24-hour time.

Why aren't all time fields within InvoiceNinja impacted by the setting?

[exstntlmsnthrp]

Interesting. I've observed a few things relating to the above.

1. The Flutter desktop app respects the locale settings. Granted, I don't know if that's because the app pulls from the OS settings.
2. Using the React UI in Firefox (my default browser), it respects the locale as set by the OS (if in fact what you say is true that toggle does not impact the time setting) and shows 24-hour time.
3. Chrome, on the other hand, does not respect the locale set by the OS. Even if you change the locale in the about config in Chrome, it still refuses to show 24-hour time.

The final thing was a bit odd. When using Chrome (which I greatly dislike), I can toggle the switch off and back on and the browser temporarily makes the change to 24-hour time in Tasks. But, when selecting something different (ex: Clients) and going back to Tasks or simply refreshing the browser page, it reverts back to AM/PM.

Why not include that in the list of time fields that are changed with that toggle? I don't understand having some fields changed by the toggle, but then other fields are impacted by the browser locale. Isn't that inconsistent UX design and shouldn't it be one or the other, not mixed?

[turbo124]

The React application uses a native date input, this date input uses the localized settings on the computer. The flutter application (where that particular toggle is relevant) provides a different set of options.

different interfaces, different ux.

[itkfm]

Firefox uses this setting to determine the locale to use for UI elements:

Chromium on GNU/Linux seems to rely on the LANGUAGE environment variable.

So, in general browser use their user interface language (not webpage locale) for the input elements.

This might be helpful for playing around with these settings:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time

[exstntlmsnthrp]

Thanks for the tips @itkfm