Variables: Allow user to filter values in dropdown using white space (#60622)

Fix #60589

public/app/features/variables/pickers/OptionsPicker/OptionsPicker.tsx

@@ -150,6 +150,7 @@ export const optionPickerFactory = <Model extends VariableWithOptions | Variable
             onNavigate={this.onNavigate}
             aria-expanded={true}
             aria-controls={`options-${id}`}
+            currenthighlightindex={picker.highlightIndex}
           />
           <VariableOptions
             values={picker.options}

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

@@ -526,7 +526,7 @@ describe('options picker actions', () => {
         .whenActionIsDispatched(toggleOptionByHighlight('key', clearOthers));
 
       const optionA = createOption('A');
-      const optionBC = createOption('BD');
+      const optionBC = createOption('BC');
 
       tester.thenDispatchedActionsShouldEqual(
         toKeyedAction('key', toggleOption({ option: optionA, forceSelect: false, clearOthers })),

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

@@ -367,7 +367,7 @@ describe('optionsPickerReducer', () => {
         .whenActionIsDispatched(moveOptionsHighlight(-1))
         .thenStateShouldEqual({
           ...initialState,
-          highlightIndex: 0,
+          highlightIndex: -1,
         });
     });
   });
@@ -535,7 +535,7 @@ describe('optionsPickerReducer', () => {
           ],
           selectedValues: [{ text: 'All', value: '$__all', selected: true }],
           queryValue: 'A',
-          highlightIndex: 0,
+          highlightIndex: -1,
         });
     });
 
@@ -559,7 +559,7 @@ describe('optionsPickerReducer', () => {
             options: [{ text: 'All', value: '$__all', selected: true }],
             selectedValues: [{ text: 'All', value: '$__all', selected: true }],
             queryValue: 'A',
-            highlightIndex: 0,
+            highlightIndex: -1,
           });
       });
     });
@@ -583,7 +583,7 @@ describe('optionsPickerReducer', () => {
             options: [{ text: 'option:1337', value: 'option:1337', selected: false }],
             selectedValues: [],
             queryValue: 'option:1337',
-            highlightIndex: 0,
+            highlightIndex: -1,
           });
       });
     });
@@ -635,7 +635,7 @@ describe('optionsPickerReducer', () => {
           ],
           selectedValues: [{ text: 'B', value: 'B', selected: true }],
           queryValue: 'A',
-          highlightIndex: 0,
+          highlightIndex: -1,
         })
         .whenActionIsDispatched(updateSearchQuery(''))
         .thenStateShouldEqual({
@@ -646,7 +646,7 @@ describe('optionsPickerReducer', () => {
           ],
           selectedValues: [{ text: 'B', value: 'B', selected: true }],
           queryValue: '',
-          highlightIndex: 0,
+          highlightIndex: -1,
         })
         .whenActionIsDispatched(updateOptionsAndFilter(options))
         .thenStateShouldEqual({
@@ -658,7 +658,7 @@ describe('optionsPickerReducer', () => {
           ],
           selectedValues: [{ text: 'B', value: 'B', selected: true }],
           queryValue: '',
-          highlightIndex: 0,
+          highlightIndex: -1,
         });
     });
   });
@@ -766,7 +766,7 @@ describe('optionsPickerReducer', () => {
           options: [{ text: 'option:11256', value: 'option:11256', selected: false }],
           selectedValues: [],
           queryValue: 'option:11256',
-          highlightIndex: 0,
+          highlightIndex: -1,
         });
     });
   });

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

@@ -167,7 +167,7 @@ const optionsPickerSlice = createSlice({
       let nextIndex = state.highlightIndex + action.payload;
 
       if (nextIndex < 0) {
-        nextIndex = 0;
+        nextIndex = -1;
       } else if (nextIndex >= state.options.length) {
         nextIndex = state.options.length - 1;
       }
@@ -205,7 +205,7 @@ const optionsPickerSlice = createSlice({
         return text.toLowerCase().indexOf(searchQuery) !== -1;
       });
 
-      state.highlightIndex = 0;
+      state.highlightIndex = -1;
 
       return applyStateChanges(state, updateDefaultSelection, updateOptions);
     },

public/app/features/variables/pickers/shared/VariableInput.tsx

@@ -8,11 +8,15 @@ export interface Props extends Omit<React.HTMLProps<HTMLInputElement>, 'onChange
   onChange: (value: string) => void;
   onNavigate: (key: NavigationKey, clearOthers: boolean) => void;
   value: string | null;
+  currenthighlightindex?: number;
 }
 
 export class VariableInput extends PureComponent<Props> {
   onKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
-    if (NavigationKey[event.keyCode]) {
+    if (
+      NavigationKey[event.keyCode] &&
+      !(event.keyCode === NavigationKey.select && this.props.currenthighlightindex === -1)
+    ) {
       const clearOthers = event.ctrlKey || event.metaKey || event.shiftKey;
       this.props.onNavigate(event.keyCode as NavigationKey, clearOthers);
       event.preventDefault();