fix: Ensure date picker relative unit select has valid default value (#…

…2817)
cloudscape-design · Oct 11, 2024 · 50a9c9e · 50a9c9e
1 parent 6f2be48
commit 50a9c9e
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 8 deletions.
diff --git a/src/date-range-picker/__tests__/date-range-picker-relative.test.tsx b/src/date-range-picker/__tests__/date-range-picker-relative.test.tsx
@@ -262,6 +262,17 @@ describe('Date range picker', () => {
       expect(getCustomRelativeRangeUnits(wrapper)).toEqual(['hours', 'minutes']);
     });
 
+    test('ensures default unit is a valid one specified from list', () => {
+      const { wrapper } = renderDateRangePicker({
+        ...defaultProps,
+        rangeSelectorMode: 'relative-only',
+        relativeOptions: [],
+        customRelativeRangeUnits: ['hour', 'day'],
+      });
+      wrapper.findTrigger().click();
+      expect(wrapper.findDropdown()!.findCustomRelativeRangeUnit()!.getElement()).toHaveTextContent('hours');
+    });
+
     test('warns about (and ignores) invalid custom units', () => {
       const { wrapper } = renderDateRangePicker({
         ...defaultProps,

diff --git a/src/date-range-picker/relative-range/index.tsx b/src/date-range-picker/relative-range/index.tsx
@@ -88,14 +88,6 @@ export default function RelativeRangePicker({
     return NaN;
   });
 
-  const initialCustomTimeUnit = dateOnly ? 'day' : 'minute';
-  const [customUnitOfTime, setCustomUnitOfTime] = useState<DateRangePickerProps.TimeUnit>(
-    initialRange?.unit ?? initialCustomTimeUnit
-  );
-
-  const showRadioControl = clientOptions.length > 0;
-  const showCustomControls = clientOptions.length === 0 || selectedRadio === CUSTOM_OPTION_SELECT_KEY;
-
   let finalUnits = dateOnly ? dayUnits : units;
   if (customUnits) {
     finalUnits = customUnits.filter(unit => {
@@ -110,6 +102,17 @@ export default function RelativeRangePicker({
     });
   }
 
+  let initialCustomTimeUnit: DateRangePickerProps.TimeUnit = dateOnly ? 'day' : 'minute';
+  if (!finalUnits.includes(initialCustomTimeUnit)) {
+    initialCustomTimeUnit = finalUnits[0];
+  }
+  const [customUnitOfTime, setCustomUnitOfTime] = useState<DateRangePickerProps.TimeUnit>(
+    initialRange?.unit ?? initialCustomTimeUnit
+  );
+
+  const showRadioControl = clientOptions.length > 0;
+  const showCustomControls = clientOptions.length === 0 || selectedRadio === CUSTOM_OPTION_SELECT_KEY;
+
   return (
     <div>
       <InternalSpaceBetween size="xs" direction="vertical">