The official way to filter items is the itemListPredicate event handler. It is documented here:
https://blueprintjs.com/docs/#select/select-component.querying
The problem is that itemListPredicate has this signature:
export declare type ItemListPredicate<T> = (query: string, items: T[]) => T[];
As you can see, it expects to filter out some items from a fixed list of already existing items in an instant. This cannot be used for large datasets. I need to send the query to the server, wait for the answer and then return the (possibly new) items. But this cannot be done with the above handler because it is not async.
I have tried to do a workaround:
- save the changed query in local state when itemListPredicate is called
- send the query the server from a debounced async method and wait for the answer
- change the
itemsproperty of theSelectcomponent after the server sends back the response
But this does not work either. Changing the items property will automatically close the Popover, so this cannot be used for live search.
I could also use a different component for this (for example, React-Select) but I would like to use a solution with blueprintjs Select - just because it is part of the blueprintjs library and integrates with it seamlessly. (E.g. sizes, themes, icons, intents etc.)
How to do this correctly?
UPDATE: I found out that I was wrong. Setting the items prop will not close the Popover. I accidentally set something else that caused to re-render the whole Select. So my idea DOES WORK. I'm not going to delete this post because someone else may need it. I'm going to post the whole solution a bit later (after testing).
