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

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 ?

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:

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.

@ 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

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

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

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

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

source code

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