Hey I just noticed that we are not able to avoid default filtering when searchable is true.
This is my code
'use client';
import { Select, type SelectOption, SelectProps } from 'rizzui';
import { useEffect, useState } from 'react';
import { useQuery } from '@tanstack/react-query';
import axiosInstance from '@/services/axios-instance.ts';
import { AsyncAutocompleteOption } from '@/types/autocomplete.ts';
interface AsyncSelectProps extends Omit<SelectProps<SelectOption>, 'options' | 'onSearchChange' | 'searchable'> {
url: string;
filters?: Record<string, any>;
}
export default function AsyncSelect({ url, filters, ...props }: AsyncSelectProps) {
const [options, setOptions] = useState<SelectOption[]>([]);
const [queryParams, setQueryParams] = useState<Record<string, any>>({
page: 1,
search: '',
...filters,
});
const fetchOptions = async () => {
const params = new URLSearchParams({ ...queryParams }).toString();
const response = await axiosInstance.get(`${url}?${params}`);
return await response.data;
};
const { data } = useQuery({
queryKey: [url, queryParams],
queryFn: fetchOptions,
});
useEffect(() => {
if (data) {
setOptions((prevOptions) => {
const existingIds = new Set(prevOptions.map((option: SelectOption) => option.value));
const newOptions = data.results
.filter((option: AsyncAutocompleteOption) => !existingIds.has(option.id))
.map((item: AsyncAutocompleteOption) => ({
value: item.id,
label: item.text,
}));
return [...prevOptions, ...newOptions];
});
}
}, [data]);
const handleInputChange = (newValue: string) => {
setQueryParams({ ...queryParams, search: newValue, page: 1 });
};
return (
<Select
{ ...props }
searchable={ true }
searchPlaceHolder="Buscar..."
onSearchChange={ handleInputChange }
options={ options }
/>
)
}
I'm creating an async select wrapper which fetch information from the backend using queryParams. So my backend requires a search param and then it filters by two different fields let's say "name" and "identification". So it's working fine for the name because that's my label but if I type an identification it pulls the information from the backend but the Select is making an extra filtering using searchByKey and searchQuery, right here
const filteredOptions = useMemo(
() =>
options.filter((item) =>
item[searchByKey].toLowerCase().includes(searchQuery.toLowerCase())
),
[searchQuery, options]
);
If your logic is fetching new options on each keystroke and using the current value of the textbox to filter on the server, you may want to consider throttling requests.
Additionally, you will need to disable the built-in filtering of the Autocomplete component by overriding the filterOptions prop:
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent