DatePicker bug fixes (#2574)

Author: devongovett

packages/@react-aria/datepicker/src/useDateSegment.ts

@@ -13,7 +13,7 @@
 import {DatePickerFieldState, DateSegment} from '@react-stately/datepicker';
 import {DatePickerProps, DateValue} from '@react-types/datepicker';
 import {DOMProps} from '@react-types/shared';
-import {isIOS, mergeProps, useEvent, useId} from '@react-aria/utils';
+import {isIOS, isMac, mergeProps, useEvent, useId} from '@react-aria/utils';
 import {labelIds} from './useDateField';
 import {NumberParser} from '@internationalized/number';
 import React, {HTMLAttributes, RefObject, useMemo, useRef} from 'react';
@@ -101,6 +101,12 @@ export function useDateSegment<T extends DateValue>(props: DatePickerProps<T> &
   };
 
   let onKeyDown = (e) => {
+    // Firefox does not fire selectstart for Ctrl/Cmd + A
+    // https://bugzilla.mozilla.org/show_bug.cgi?id=1742153
+    if (e.key === 'a' && (isMac() ? e.metaKey : e.ctrlKey)) {
+      e.preventDefault();
+    }
+
     if (e.ctrlKey || e.metaKey || e.shiftKey || e.altKey) {
       return;
     }

packages/@react-spectrum/datepicker/src/DatePicker.tsx

@@ -158,17 +158,19 @@ export function DatePicker<T extends DateValue>(props: SpectrumDatePickerProps<T
                 minValue={props.minValue}
                 maxValue={props.maxValue} />
               {showTimeField &&
-                <TimeField
-                  label="Time"
-                  value={state.timeValue}
-                  onChange={state.setTimeValue}
-                  placeholderValue={timePlaceholder}
-                  granularity={timeGranularity}
-                  minValue={timeMinValue}
-                  maxValue={timeMaxValue}
-                  hourCycle={props.hourCycle}
-                  hideTimeZone={props.hideTimeZone}
-                  marginTop="size-100" />
+                <div className={classNames(datepickerStyles, 'react-spectrum-Datepicker-timeFields')}>
+                  <TimeField
+                    label="Time"
+                    value={state.timeValue}
+                    onChange={state.setTimeValue}
+                    placeholderValue={timePlaceholder}
+                    granularity={timeGranularity}
+                    minValue={timeMinValue}
+                    maxValue={timeMaxValue}
+                    hourCycle={props.hourCycle}
+                    hideTimeZone={props.hideTimeZone}
+                    marginTop="size-100" />
+                </div>
               }
             </Content>
           </Dialog>

packages/@react-spectrum/datepicker/src/index.css

@@ -66,6 +66,7 @@
   &::-webkit-scrollbar { /* WebKit */
     width: 0;
     height: 0;
+    display: none;
   }
 }
 
@@ -96,6 +97,12 @@
   box-sizing: content-box;
   white-space: nowrap;
   color: var(--spectrum-textfield-text-color);
+
+  &::selection {
+    /* hide the selection because there is no way to fully prevent it in Firefox */
+    /* https://bugzilla.mozilla.org/show_bug.cgi?id=1742153 */
+    background: transparent;
+  }
 }
 
 .react-spectrum-DatePicker-cell:focus {
@@ -149,4 +156,6 @@
   width: 100%;
   min-width: calc(var(--spectrum-calendar-day-width) * 7);
   max-width: calc((var(--spectrum-calendar-day-width) * 7) + (var(--spectrum-calendar-day-padding) * 12));
+  padding: 0 var(--spectrum-calendar-day-padding);
+  box-sizing: border-box;
 }