Add support to use custom values in dropdown (#2163)
## Summary
When we switched to use `Combobox` we were no longer able to add custom
values for our dropdowns, and this prevented users from using regexp
values for `group`, `host`, `proxy` etc. This PR adds
`createCustomValue` flag so that any custom value can be entered into
the dropdowns.
## Detailed summary
- Make use of `Combobox`'s `createCustomValues` so that wherever
necessary, users are able to enter regex values.
<img width="720" height="221" alt="Screenshot 2026-01-05 at 7 15 23 AM"
src="https://github.com/user-attachments/assets/841716eb-cd86-49d1-b13c-a0e37e8a37b9"
/>
## Why
For users to be able to use regexp, and any custom value in our
dropdowns.
## How to test
For all query types where dropdowns are used and user configurable (i.e.
group, host, proxy, application) start typing a value that does not
already exist in the dropdown. You should see an option to `Use custom
value`
Fixes
[comment](https://github.com/grafana/grafana-zabbix/pull/2141#issuecomment-3698818476),
thanks for the testing and call out @christos-diamantis
This commit is contained in:
committed by
GitHub
parent
0d64736e86
commit
9fda7768ff
@@ -9,10 +9,11 @@ export interface Props {
|
||||
isLoading?: boolean;
|
||||
options: Array<ComboboxOption<string>>;
|
||||
width?: number;
|
||||
createCustomValue?: boolean;
|
||||
onChange: (value: string) => void;
|
||||
}
|
||||
|
||||
export const MetricPicker = ({ value, placeholder, options, isLoading, width, onChange }: Props) => {
|
||||
export const MetricPicker = ({ value, placeholder, options, isLoading, width, onChange, createCustomValue }: Props) => {
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
|
||||
const onMenuOptionSelect = (option: SelectableValue<string>) => {
|
||||
@@ -23,6 +24,7 @@ export const MetricPicker = ({ value, placeholder, options, isLoading, width, on
|
||||
return (
|
||||
<div data-testid="role-picker" style={{ position: 'relative' }} ref={ref}>
|
||||
<Combobox<string>
|
||||
createCustomValue={createCustomValue ?? false}
|
||||
width={width}
|
||||
value={value}
|
||||
options={options ?? []}
|
||||
|
||||
Reference in New Issue
Block a user