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,23 +148,28 @@ const optionsPickerSlice = createSlice({
     toggleOption: (state, action: PayloadAction<ToggleOption>): OptionsPickerState => {
       const { option, clearOthers, forceSelect } = action.payload;
       const { multi, selectedValues } = state;
-      const selected = !selectedValues.find((o) => o.value === option.value);
 
-      if (option.value === ALL_VARIABLE_VALUE || !multi || clearOthers) {
-        if (selected || forceSelect) {
-          state.selectedValues = [{ ...option, selected: true }];
-        } else {
-          state.selectedValues = [];
+      if (option) {
+        const selected = !selectedValues.find((o) => o.value === option.value);
+
+        if (option.value === ALL_VARIABLE_VALUE || !multi || clearOthers) {
+          if (selected || forceSelect) {
+            state.selectedValues = [{ ...option, selected: true }];
+          } else {
+            state.selectedValues = [];
+          }
+          return applyStateChanges(state, updateDefaultSelection, updateAllSelection, updateOptions);
+        }
+        if (forceSelect || selected) {
+          state.selectedValues.push({ ...option, selected: true });
+          return applyStateChanges(state, updateDefaultSelection, updateAllSelection, updateOptions);
         }
-        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 = [];
       }
 
-      state.selectedValues = selectedValues.filter((o) => o.value !== option.value);
       return applyStateChanges(state, updateDefaultSelection, updateAllSelection, updateOptions);
     },
     toggleTag: (state, action: PayloadAction<VariableTag>): OptionsPickerState => {