rohskiddo/UMBRA
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Firefox DatePicker input variant falls through to button variant

Browse Source 
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>
This commit is contained in:
Kyle 2026-03-03 15:49:03 +08:00
parent 8e922a1f1c
commit e7979afba3
1 changed files with 8 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
frontend/src/components/ui/date-picker.tsx
View File

@ -433,35 +433,22 @@ const DatePicker = React.forwardRef<HTMLButtonElement, DatePickerProps>(
) )
: null; : null;
// ── Input variant ── // ── Input variant (Chromium only) ──
// Firefox: use type="text" to avoid the native calendar icon that cannot be // Firefox: falls through to the button variant below because Firefox has no
// hidden via CSS (Firefox has no ::-webkit-calendar-picker-indicator equivalent). // CSS pseudo-element to hide its native calendar icon (Mozilla bug 1830890).
// Chromium: use native type="date"/"datetime-local" for segmented editing UX, // Chromium: uses native type="date"/"datetime-local" for segmented editing UX,
// with the native icon hidden via CSS in index.css (.datepicker-wrapper rule). // with the native icon hidden via CSS in index.css (.datepicker-wrapper rule).
if (variant === 'input') { if (variant === 'input' && !isFirefox) {
const nativeType = isFirefox
? 'text'
: mode === 'datetime'
? 'datetime-local'
: 'date';
const textPlaceholder = isFirefox
? mode === 'datetime'
? 'YYYY-MM-DDThh:mm'
: 'YYYY-MM-DD'
: undefined;
return ( return (
<> <>
<div ref={wrapperRef} className="datepicker-wrapper relative"> <div ref={wrapperRef} className="datepicker-wrapper relative">
<input <input
ref={inputElRef} ref={inputElRef}
type={nativeType} type={mode === 'datetime' ? 'datetime-local' : 'date'}
id={id} id={id}
name={name} name={name}
autoComplete={autoComplete} autoComplete={autoComplete}
value={value} value={value}
placeholder={textPlaceholder}
onChange={(e) => onChange(e.target.value)} onChange={(e) => onChange(e.target.value)}
onBlur={handleInputBlur} onBlur={handleInputBlur}
onKeyDown={(e) => { onKeyDown={(e) => {
@ -473,8 +460,8 @@ const DatePicker = React.forwardRef<HTMLButtonElement, DatePickerProps>(
}} }}
required={required} required={required}
disabled={disabled} disabled={disabled}
min={isFirefox ? undefined : min} min={min}
max={isFirefox ? undefined : max} max={max}
className={cn( 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', '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 className