I am writing a plugin that queries an API based on what the user selects from a dropdown. This dropdown needs to be filled with a ton of values (>40,000) but as you can expect, this causes a huge performance hit. I am attempting to limit the amount of values actually shown in the dropdown to 100 and then as the user searches in the dropdown it should narrow down the list. To do this, I tried setting maxVisibleValues to 100 but I get an error when loading the Query Editor: TypeError: Cannot read properties of undefined (reading 'querySubscription'). Can someone explain what might cause this issue?
// This is what gets rendered to the Query editor UI
render() {
return (
<div className="gf-form">
<Select
options = {this.getOptions()} // Returns a SelectableValue<String>[] list of 40000+ values
width={90}
onChange={(v) => {this.onTargetChange(String(v.label))}}
maxVisibleValues = {100}
placeholder="Select a value..."
/>
</div>
);
}
I just tried this out, and found that I needed to add the value prop as well to set the current value. That being said, I can’t see the effect of maxVisibleValues in my example. Will update this thread if I learn more.
Thanks for taking a look a this Marcus! It turns out I do need the value prop in there as that is what it was erroring on (turns out the original post didn’t have the root error - line 279 of SelectBase.tsx). I am also noticing that the maxVisibleValues prop is not limiting the values in the dropdown. Please let me know what you can find!
Have you been able to take a look at this issue? It’s a major blocker for my current development so I want to try closing this out before having to look at alternative methods.
I tried taking a look through grafana/SelectBase.tsx (grafana/SelectBase.tsx at main · grafana/grafana · GitHub). The only thing that I can think of is maxVisibleValues is being checked against selectedValuesCount. I’m not 100% sure what selectedValuesCount is but based on the name, my thought is that is the amount of values that have been selected, meaning you could select multiple values in the dropdown. I think this should be checked against the length of values in the options prop, but I could be misunderstanding somewhere. Other than that, I’m having a hard time finding any other issues.
Unfortunately not. I’ve asked around a bit and it indeed seems like the Select component isn’t really equipped to handle that kind of data. I wonder if it would be possible with the AsyncSelect, but my bet is that we’d need a specific component with some form of lazy loading.
Are there any plans on fixing the maxVisibleValues prop to only show a specific amount of options in the dropdown? If not I need to find another method. My other idea is some way to update the options every time the user inputs something into the dropdown but it seems like the dropdown will not let me change the options once they are set.
Could you could wrap the Select component and handle the state yourself perhaps? Otherwise I think you might need to build a custom component for this at the moment.
