"search-as-you-type" for variables not working

Grafana Time Series Panel
1

The dropdown box for variable on the dashboard stop the “search-as-you-type” behavior when the list is bit long. If anything, thats the most important time we would need dynamic searching to reduce the list and make selection easy.

Is this a bug or by-design? Can this be enabled somehow ?

2

Hi\ @psrivastava,

Can you help us try to understand this problem a little better?

Let’s use this example of dashboard variables.
https://play.grafana.org/d/000000056/graphite-templated-nested?orgId=1

Can you describe what the issue is? OR take a screenshot of the issue on your instance? Thanks! :+1:

3

So here you can see, in the interval dropdown, how as we type in ‘d’ would result in list getting filtered for entries containing ‘d’. Makes selection very convinient.

The issue is not reproducible here. In my case the drop down is getting populated based on a sql query against DB. Let me try creating a gif of what is happening.

My observation: when list is small, auto filtering works while when list is huge the feature of filtering based on input stops working.

4

@ mattabrams

here is gif attached showing the problem. Typing gamma did not filter the list, I had to manually select it.

If I make the list short, same drop down starts acting as expected.

(click the gif for steps)

search-as-type

1 Like
5

Ah, I see. Anything interesting showing the browser’s dev tools when this happens?

6

ohh, right, I forgot to check out dev-tools.

& yes, with every key stroke I see the error generated. Seems something is null.

Screen Shot 2021-06-02 at 9.13.35 PM
Screen Shot 2021-06-02 at 9.13.35 PM2364×1148 388 KB

Complete text

Uncaught (in promise) TypeError: undefined has no properties
    options reducer.ts:239
    updateOptionsAndFilter reducer.ts:238
    Redux 5
    reducer root.ts:51
    Redux 3
    t actions.ts:71
    c runtime.js:45
    _invoke runtime.js:271
    t runtime.js:97
    ne app.4e20f99bf66682942589.js:2
    i app.4e20f99bf66682942589.js:2
    re app.4e20f99bf66682942589.js:2
    re app.4e20f99bf66682942589.js:2
    filterOrSearchOptions actions.ts:59
    Redux 2
    onChange VariableInput.tsx:20
    React 16
        y
        w
        S
        S
        k
        _
        T
        jr
        se
        Ar
        Tr
        kr
        unstable_runWithPriority
        Wo
        ue
        Er
reducer.ts:239:62
    ne app.4e20f99bf66682942589.js:2
    i app.4e20f99bf66682942589.js:2
    re app.4e20f99bf66682942589.js:2
    re app.4e20f99bf66682942589.js:2
    filterOrSearchOptions actions.ts:59
    Redux 2
    onChange VariableInput.tsx:20
    React 5
    forEach self-hosted:225
    React 7
    bind_applyFunctionN self-hosted:1042
    kr self-hosted:1005
    React 4
    Er self-hosted:948
7

source code

Screen Shot 2021-06-03 at 12.24.09 AM
Screen Shot 2021-06-03 at 12.24.09 AM2364×1028 427 KB

8

I’ve got it working with a very strange workaround. My list was getting populated from database query. SELECT DISTINCT name FROM db returns 221 items but dynamic searching raises errors.
I changed my query to SELECT DISTINCT name from db WHERE name LIKE '%' , I still get 221 count but now my dynamic search starts to work

1 Like
9

actually found the root cause. Database was returning a null value.
if the list has a null, it stops working. Thats what this above workaround actually tricked.

fixed the db for nulls, now regular query works as well.

10

In the example ( https://play.grafana.org/d/000000056/graphite-templated-nested?orgId=1

if there is one Chinese Item in the app list, and I input the first Chinese Character, it can not be filtered. And it can only filter ASCII character.

How to filter Chinese Characters?

Grafana version: 11.1.0