diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangeContext.test.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangeContext.test.tsx
index fcea55c1524..4ef66005aa7 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangeContext.test.tsx
+++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangeContext.test.tsx
@@ -79,6 +79,43 @@ describe('TimeRangeProvider', () => {
syncedValue: undefined,
});
});
+
+ it('sets status to not synced if only 1 component remains', async () => {
+ let context2: TimeRangeContextHookValue | undefined = undefined;
+ function onContextChange2(val?: TimeRangeContextHookValue) {
+ context2 = val;
+ }
+
+ const renderContext = render(
+
+
+
+
+ );
+
+ const timeRange = makeTimeRange('2021-01-01', '2021-01-02');
+ act(() => {
+ context?.sync(timeRange);
+ });
+
+ expect(context2).toMatchObject({
+ syncPossible: true,
+ synced: true,
+ syncedValue: timeRange,
+ });
+
+ renderContext.rerender(
+
+
+
+ );
+
+ expect(context2).toMatchObject({
+ syncPossible: false,
+ synced: false,
+ syncedValue: undefined,
+ });
+ });
});
describe('useTimeRangeContext', () => {
diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangeContext.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangeContext.tsx
index 37907c2a83c..a4a911fa53e 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangeContext.tsx
+++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangeContext.tsx
@@ -42,7 +42,15 @@ export function TimeRangeProvider({ children }: { children: ReactNode }) {
sync: (value: TimeRange) => setSyncedValue(value),
unSync: () => setSyncedValue(undefined),
addPicker: () => setPickersCount((val) => val + 1),
- removePicker: () => setPickersCount((val) => val - 1),
+ removePicker: () => {
+ setPickersCount((val) => {
+ const newVal = val - 1;
+ if (newVal < 2) {
+ setSyncedValue(undefined);
+ }
+ return newVal;
+ });
+ },
syncPossible: pickersCount > 1,
synced: Boolean(syncedValue),
syncedValue,