Официальный способ фильтрации элементов - обработчик событий itemListPredicate. Здесь задокументировано:
https://blueprintjs.com/docs/#select/select-component.querying
Проблема в том, что itemListPredicate имеет эту подпись:
export declare type ItemListPredicate<T> = (query: string, items: T[]) => T[];
Как вы видите, он ожидает отфильтровать некоторые элементы из фиксированного списка уже существующих элементов в одно мгновение. Это не может быть использовано для больших наборов данных. Мне нужно отправить запрос на сервер, дождаться ответа и затем вернуть (возможно, новые) элементы. Но этого нельзя сделать с помощью описанного выше обработчика, поскольку он не асинхронный.
Я попытался сделать обходной путь:
* сохранить измененный запрос в локальном состоянии при вызове itemListPredicate
* отправьте запрос на сервер из аннулированного асинхронного метода и дождитесь ответа
* измените свойство items компонента Select после того, как сервер вернет ответ
Но это тоже не работает. Изменение свойства items автоматически закроет Popover, поэтому его нельзя использовать для поиска в реальном времени.
Я также мог бы использовать для этого другой компонент (например, React-Select), но я бы хотел использовать решение с blueprintjs Select - просто потому, что оно является частью библиотеки blueprintjs и легко интегрируется с ней. (Например, размеры, темы, значки, намерения и т. Д.)
Как это сделать правильно?
ОБНОВЛЕНИЕ : Я узнал, что был неправ. Установка реквизита предметов не закроет Popover. Я случайно установил что-то еще, что вызвало повторную визуализацию всего Select. Так что моя идея РАБОТАЕТ. Я не собираюсь удалять этот пост, потому что это может понадобиться кому-то другому. Я собираюсь опубликовать все решение чуть позже (после тестирования).