Variables: Fixes error when manually non-matching entering custom value in variable input/picker (#32390)

public/app/features/variables/pickers/OptionsPicker/reducer.test.ts

@@ -81,6 +81,28 @@ describe('optionsPickerReducer', () => {
         });
     };
 
+    describe('When toggleOption with undefined option is dispatched', () => {
+      it('should update selected values', () => {
+        const { initialState } = getVariableTestContext({
+          options: [],
+          selectedValues: [],
+        });
+        const payload = {
+          forceSelect: false,
+          clearOthers: true,
+          option: undefined,
+        };
+        reducerTester<OptionsPickerState>()
+          .givenReducer(optionsPickerReducer, cloneDeep(initialState))
+          .whenActionIsDispatched(toggleOption(payload))
+          .thenStateShouldEqual({
+            ...initialState,
+            selectedValues: [],
+            options: [],
+          });
+      });
+    });
+
     describe('toggleOption for multi value variable', () => {
       const multi = true;
       describe('and value All is selected in options', () => {
@@ -112,6 +134,7 @@ describe('optionsPickerReducer', () => {
             })
         );
       });
+
       describe('and value A is selected in options', () => {
         const options = opsA;
         it.each`

public/app/features/variables/pickers/OptionsPicker/reducer.ts

@@ -7,7 +7,7 @@ import { applyStateChanges } from '../../../../core/utils/applyStateChanges';
 import { containsSearchFilter } from '../../utils';
 
 export interface ToggleOption {
-  option: VariableOption;
+  option?: VariableOption;
   forceSelect: boolean;
   clearOthers: boolean;
 }
@@ -148,6 +148,8 @@ const optionsPickerSlice = createSlice({
     toggleOption: (state, action: PayloadAction<ToggleOption>): OptionsPickerState => {
       const { option, clearOthers, forceSelect } = action.payload;
       const { multi, selectedValues } = state;
+
+      if (option) {
         const selected = !selectedValues.find((o) => o.value === option.value);
 
         if (option.value === ALL_VARIABLE_VALUE || !multi || clearOthers) {
@@ -158,13 +160,16 @@ const optionsPickerSlice = createSlice({
           }
           return applyStateChanges(state, updateDefaultSelection, updateAllSelection, updateOptions);
         }
-
         if (forceSelect || selected) {
           state.selectedValues.push({ ...option, selected: true });
           return applyStateChanges(state, updateDefaultSelection, updateAllSelection, updateOptions);
         }
 
         state.selectedValues = selectedValues.filter((o) => o.value !== option.value);
+      } else {
+        state.selectedValues = [];
+      }
+
       return applyStateChanges(state, updateDefaultSelection, updateAllSelection, updateOptions);
     },
     toggleTag: (state, action: PayloadAction<VariableTag>): OptionsPickerState => {