From e7979afba3d3a8e7cc6b2e12adb8372979469ece Mon Sep 17 00:00:00 2001
From: Kyle Pope <kyle.a.pope@outlook.com>
Date: Tue, 3 Mar 2026 15:49:03 +0800
Subject: [PATCH] Firefox DatePicker input variant falls through to button
 variant

Instead of type=text with raw ISO strings, Firefox users now get
the same button-style picker used on the registration screen.
Chromium keeps native date/datetime-local for segmented editing.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/components/ui/date-picker.tsx | 29 ++++++----------------
 1 file changed, 8 insertions(+), 21 deletions(-)

diff --git a/frontend/src/components/ui/date-picker.tsx b/frontend/src/components/ui/date-picker.tsx
index a8756ed..88af6a6 100644
--- a/frontend/src/components/ui/date-picker.tsx
+++ b/frontend/src/components/ui/date-picker.tsx
@@ -433,35 +433,22 @@ const DatePicker = React.forwardRef<HTMLButtonElement, DatePickerProps>(
         )
       : null;
 
-    // ── Input variant ──
-    // Firefox: use type="text" to avoid the native calendar icon that cannot be
-    // hidden via CSS (Firefox has no ::-webkit-calendar-picker-indicator equivalent).
-    // Chromium: use native type="date"/"datetime-local" for segmented editing UX,
+    // ── Input variant (Chromium only) ──
+    // Firefox: falls through to the button variant below because Firefox has no
+    // CSS pseudo-element to hide its native calendar icon (Mozilla bug 1830890).
+    // Chromium: uses native type="date"/"datetime-local" for segmented editing UX,
     // with the native icon hidden via CSS in index.css (.datepicker-wrapper rule).
-    if (variant === 'input') {
-      const nativeType = isFirefox
-        ? 'text'
-        : mode === 'datetime'
-          ? 'datetime-local'
-          : 'date';
-
-      const textPlaceholder = isFirefox
-        ? mode === 'datetime'
-          ? 'YYYY-MM-DDThh:mm'
-          : 'YYYY-MM-DD'
-        : undefined;
-
+    if (variant === 'input' && !isFirefox) {
       return (
         <>
           <div ref={wrapperRef} className="datepicker-wrapper relative">
             <input
               ref={inputElRef}
-              type={nativeType}
+              type={mode === 'datetime' ? 'datetime-local' : 'date'}
               id={id}
               name={name}
               autoComplete={autoComplete}
               value={value}
-              placeholder={textPlaceholder}
               onChange={(e) => onChange(e.target.value)}
               onBlur={handleInputBlur}
               onKeyDown={(e) => {
@@ -473,8 +460,8 @@ const DatePicker = React.forwardRef<HTMLButtonElement, DatePickerProps>(
               }}
               required={required}
               disabled={disabled}
-              min={isFirefox ? undefined : min}
-              max={isFirefox ? undefined : max}
+              min={min}
+              max={max}
               className={cn(
                 'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 pr-9 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
                 className