mirror of
https://github.com/grafana/grafana.git
synced 2025-02-20 11:48:34 -06:00
Variables: Allow user to filter values in dropdown using white space (#60622)
Fix #60589
This commit is contained in:
parent
6d9e082f27
commit
50df85189c
@ -150,6 +150,7 @@ export const optionPickerFactory = <Model extends VariableWithOptions | Variable
|
|||||||
onNavigate={this.onNavigate}
|
onNavigate={this.onNavigate}
|
||||||
aria-expanded={true}
|
aria-expanded={true}
|
||||||
aria-controls={`options-${id}`}
|
aria-controls={`options-${id}`}
|
||||||
|
currenthighlightindex={picker.highlightIndex}
|
||||||
/>
|
/>
|
||||||
<VariableOptions
|
<VariableOptions
|
||||||
values={picker.options}
|
values={picker.options}
|
||||||
|
@ -526,7 +526,7 @@ describe('options picker actions', () => {
|
|||||||
.whenActionIsDispatched(toggleOptionByHighlight('key', clearOthers));
|
.whenActionIsDispatched(toggleOptionByHighlight('key', clearOthers));
|
||||||
|
|
||||||
const optionA = createOption('A');
|
const optionA = createOption('A');
|
||||||
const optionBC = createOption('BD');
|
const optionBC = createOption('BC');
|
||||||
|
|
||||||
tester.thenDispatchedActionsShouldEqual(
|
tester.thenDispatchedActionsShouldEqual(
|
||||||
toKeyedAction('key', toggleOption({ option: optionA, forceSelect: false, clearOthers })),
|
toKeyedAction('key', toggleOption({ option: optionA, forceSelect: false, clearOthers })),
|
||||||
|
@ -367,7 +367,7 @@ describe('optionsPickerReducer', () => {
|
|||||||
.whenActionIsDispatched(moveOptionsHighlight(-1))
|
.whenActionIsDispatched(moveOptionsHighlight(-1))
|
||||||
.thenStateShouldEqual({
|
.thenStateShouldEqual({
|
||||||
...initialState,
|
...initialState,
|
||||||
highlightIndex: 0,
|
highlightIndex: -1,
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
@ -535,7 +535,7 @@ describe('optionsPickerReducer', () => {
|
|||||||
],
|
],
|
||||||
selectedValues: [{ text: 'All', value: '$__all', selected: true }],
|
selectedValues: [{ text: 'All', value: '$__all', selected: true }],
|
||||||
queryValue: 'A',
|
queryValue: 'A',
|
||||||
highlightIndex: 0,
|
highlightIndex: -1,
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -559,7 +559,7 @@ describe('optionsPickerReducer', () => {
|
|||||||
options: [{ text: 'All', value: '$__all', selected: true }],
|
options: [{ text: 'All', value: '$__all', selected: true }],
|
||||||
selectedValues: [{ text: 'All', value: '$__all', selected: true }],
|
selectedValues: [{ text: 'All', value: '$__all', selected: true }],
|
||||||
queryValue: 'A',
|
queryValue: 'A',
|
||||||
highlightIndex: 0,
|
highlightIndex: -1,
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
@ -583,7 +583,7 @@ describe('optionsPickerReducer', () => {
|
|||||||
options: [{ text: 'option:1337', value: 'option:1337', selected: false }],
|
options: [{ text: 'option:1337', value: 'option:1337', selected: false }],
|
||||||
selectedValues: [],
|
selectedValues: [],
|
||||||
queryValue: 'option:1337',
|
queryValue: 'option:1337',
|
||||||
highlightIndex: 0,
|
highlightIndex: -1,
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
@ -635,7 +635,7 @@ describe('optionsPickerReducer', () => {
|
|||||||
],
|
],
|
||||||
selectedValues: [{ text: 'B', value: 'B', selected: true }],
|
selectedValues: [{ text: 'B', value: 'B', selected: true }],
|
||||||
queryValue: 'A',
|
queryValue: 'A',
|
||||||
highlightIndex: 0,
|
highlightIndex: -1,
|
||||||
})
|
})
|
||||||
.whenActionIsDispatched(updateSearchQuery(''))
|
.whenActionIsDispatched(updateSearchQuery(''))
|
||||||
.thenStateShouldEqual({
|
.thenStateShouldEqual({
|
||||||
@ -646,7 +646,7 @@ describe('optionsPickerReducer', () => {
|
|||||||
],
|
],
|
||||||
selectedValues: [{ text: 'B', value: 'B', selected: true }],
|
selectedValues: [{ text: 'B', value: 'B', selected: true }],
|
||||||
queryValue: '',
|
queryValue: '',
|
||||||
highlightIndex: 0,
|
highlightIndex: -1,
|
||||||
})
|
})
|
||||||
.whenActionIsDispatched(updateOptionsAndFilter(options))
|
.whenActionIsDispatched(updateOptionsAndFilter(options))
|
||||||
.thenStateShouldEqual({
|
.thenStateShouldEqual({
|
||||||
@ -658,7 +658,7 @@ describe('optionsPickerReducer', () => {
|
|||||||
],
|
],
|
||||||
selectedValues: [{ text: 'B', value: 'B', selected: true }],
|
selectedValues: [{ text: 'B', value: 'B', selected: true }],
|
||||||
queryValue: '',
|
queryValue: '',
|
||||||
highlightIndex: 0,
|
highlightIndex: -1,
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
@ -766,7 +766,7 @@ describe('optionsPickerReducer', () => {
|
|||||||
options: [{ text: 'option:11256', value: 'option:11256', selected: false }],
|
options: [{ text: 'option:11256', value: 'option:11256', selected: false }],
|
||||||
selectedValues: [],
|
selectedValues: [],
|
||||||
queryValue: 'option:11256',
|
queryValue: 'option:11256',
|
||||||
highlightIndex: 0,
|
highlightIndex: -1,
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
@ -167,7 +167,7 @@ const optionsPickerSlice = createSlice({
|
|||||||
let nextIndex = state.highlightIndex + action.payload;
|
let nextIndex = state.highlightIndex + action.payload;
|
||||||
|
|
||||||
if (nextIndex < 0) {
|
if (nextIndex < 0) {
|
||||||
nextIndex = 0;
|
nextIndex = -1;
|
||||||
} else if (nextIndex >= state.options.length) {
|
} else if (nextIndex >= state.options.length) {
|
||||||
nextIndex = state.options.length - 1;
|
nextIndex = state.options.length - 1;
|
||||||
}
|
}
|
||||||
@ -205,7 +205,7 @@ const optionsPickerSlice = createSlice({
|
|||||||
return text.toLowerCase().indexOf(searchQuery) !== -1;
|
return text.toLowerCase().indexOf(searchQuery) !== -1;
|
||||||
});
|
});
|
||||||
|
|
||||||
state.highlightIndex = 0;
|
state.highlightIndex = -1;
|
||||||
|
|
||||||
return applyStateChanges(state, updateDefaultSelection, updateOptions);
|
return applyStateChanges(state, updateDefaultSelection, updateOptions);
|
||||||
},
|
},
|
||||||
|
@ -8,11 +8,15 @@ export interface Props extends Omit<React.HTMLProps<HTMLInputElement>, 'onChange
|
|||||||
onChange: (value: string) => void;
|
onChange: (value: string) => void;
|
||||||
onNavigate: (key: NavigationKey, clearOthers: boolean) => void;
|
onNavigate: (key: NavigationKey, clearOthers: boolean) => void;
|
||||||
value: string | null;
|
value: string | null;
|
||||||
|
currenthighlightindex?: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
export class VariableInput extends PureComponent<Props> {
|
export class VariableInput extends PureComponent<Props> {
|
||||||
onKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
|
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;
|
const clearOthers = event.ctrlKey || event.metaKey || event.shiftKey;
|
||||||
this.props.onNavigate(event.keyCode as NavigationKey, clearOthers);
|
this.props.onNavigate(event.keyCode as NavigationKey, clearOthers);
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
|
Loading…
Reference in New Issue
Block a user