IntervalVariableEditor: Do not add current value as interval prop (#86446)

public/app/features/dashboard-scene/settings/variables/editors/IntervalVariableEditor.test.tsx

@@ -46,6 +46,7 @@ describe('IntervalVariableEditor', () => {
       name: 'test',
       type: 'interval',
       intervals: ['1m', '10m', '1h', '6h', '1d', '7d'],
+      value: '10m',
     });
 
     const onRunQuery = jest.fn();
@@ -61,6 +62,8 @@ describe('IntervalVariableEditor', () => {
 
     expect(intervalsInput).toBeInTheDocument();
     expect(intervalsInput).toHaveValue('7d,30d, 1y, 5y, 10y');
+    // If the value is not in the list, it should be set to the first value
+    expect(variable.state.value).toBe('7d');
     expect(onRunQuery).toHaveBeenCalledTimes(1);
   });
 

public/app/features/dashboard-scene/settings/variables/editors/IntervalVariableEditor.tsx

@@ -15,14 +15,21 @@ interface IntervalVariableEditorProps {
 }
 
 export function IntervalVariableEditor({ variable, onRunQuery }: IntervalVariableEditorProps) {
-  const { intervals, autoStepCount, autoEnabled, autoMinInterval } = variable.useState();
+  const { intervals, autoStepCount, autoEnabled, autoMinInterval, value } = variable.useState();
 
   //transform intervals array into string
   const intervalsCombined = getIntervalsQueryFromNewIntervalModel(intervals);
 
   const onIntervalsChange = (event: FormEvent<HTMLInputElement>) => {
-    const intervalsArray = getIntervalsFromQueryString(event.currentTarget.value);
-    variable.setState({ intervals: intervalsArray });
+    const newIntervals = getIntervalsFromQueryString(event.currentTarget.value);
+    // if the current value is not in the new intervals, set the value to the first interval
+    const newValue = newIntervals.includes(value) ? value : newIntervals[0];
+
+    variable.setState({
+      intervals: newIntervals,
+      value: newValue,
+    });
+
     onRunQuery();
   };