From da38407ab5fa3945c37bd307250afd7a38eb51f5 Mon Sep 17 00:00:00 2001 From: Manoj Vivek Date: Thu, 23 Oct 2025 13:36:55 +0530 Subject: [PATCH] Calling the set methods only when the relative time's unit and value changes --- .../RelativeDatePicker/index.tsx | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/ui/packages/shared/components/src/DateTimeRangePicker/RelativeDatePicker/index.tsx b/ui/packages/shared/components/src/DateTimeRangePicker/RelativeDatePicker/index.tsx index ca699d43377..d66ae99b428 100644 --- a/ui/packages/shared/components/src/DateTimeRangePicker/RelativeDatePicker/index.tsx +++ b/ui/packages/shared/components/src/DateTimeRangePicker/RelativeDatePicker/index.tsx @@ -79,6 +79,14 @@ export const RelativeDatePickerForPanel = ({ // absolute date range is converted to a relative date range and we then use the `onChange` prop to // update the range in the `RelativeDatePicker` component below. useEffect(() => { + // Only update if the unit/value actually changed from what's in the range + if (range.from.isRelative()) { + const currentFrom = range.from as RelativeDate; + if (currentFrom.unit === unit && currentFrom.value === value) { + return; + } + } + onChange(new RelativeDate(unit, value), createNow()); // eslint-disable-next-line react-hooks/exhaustive-deps }, [unit, value]); @@ -142,6 +150,14 @@ const RelativeDatePicker = ({ useEffect(() => { const formattedRange = formatRange(validRange.value, validRange.unit); setRangeInputString(formattedRange); + + // Only update if the value actually changed from what's in the range + if (range.from.isRelative()) { + const currentFrom = range.from as RelativeDate; + if (currentFrom.unit === validRange.unit && currentFrom.value === validRange.value) { + return; + } + } onChange(new RelativeDate(validRange.unit, validRange.value), createNow()); // eslint-disable-next-line react-hooks/exhaustive-deps }, [validRange]);