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 index bfbef18c85..be1f47a759 100644 --- 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 index 52511814e2..3884be88e7 100644 --- 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( - 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( + initialRange?.unit ?? initialCustomTimeUnit + ); + + const showRadioControl = clientOptions.length > 0; + const showCustomControls = clientOptions.length === 0 || selectedRadio === CUSTOM_OPTION_SELECT_KEY; + return (