feat: update ProductSelect to use server-side search value for improved filtering
This commit is contained in:
@@ -16,7 +16,8 @@ type Props = Omit<ObjectSelectProps<ProductSchema>, "data"> & RestProps;
|
|||||||
|
|
||||||
const ProductSelect: FC<Props> = (props: Props) => {
|
const ProductSelect: FC<Props> = (props: Props) => {
|
||||||
const [searchValue, setSearchValue] = useState("");
|
const [searchValue, setSearchValue] = useState("");
|
||||||
const [debounced] = useDebouncedValue(searchValue, 500);
|
const [searchValueServer, setSearchValueServer] = useState("");
|
||||||
|
const [debounced] = useDebouncedValue(searchValueServer, 500);
|
||||||
const { products, isLoading } = useProductsList({
|
const { products, isLoading } = useProductsList({
|
||||||
clientId: props.clientId,
|
clientId: props.clientId,
|
||||||
searchInput: debounced,
|
searchInput: debounced,
|
||||||
@@ -37,19 +38,22 @@ const ProductSelect: FC<Props> = (props: Props) => {
|
|||||||
return filterProducts(search).map(product => ({ label: product.name, value: product.id.toString() }));
|
return filterProducts(search).map(product => ({ label: product.name, value: product.id.toString() }));
|
||||||
};
|
};
|
||||||
const setSearchValueImpl = (value: string) => {
|
const setSearchValueImpl = (value: string) => {
|
||||||
value = value.toLowerCase().trim();
|
|
||||||
if (!value) return;
|
|
||||||
if (filterProducts(value)) return;
|
|
||||||
setSearchValue(value);
|
setSearchValue(value);
|
||||||
|
const filtered = filterProducts(value);
|
||||||
|
if (filtered && filtered.length > 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setSearchValueServer(value);
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ObjectSelect
|
<ObjectSelect
|
||||||
rightSection={
|
rightSection={
|
||||||
isLoading || searchValue !== debounced ? (
|
isLoading? (
|
||||||
<Loader size={"sm"} />
|
<Loader size={"sm"} />
|
||||||
) : null
|
) : null
|
||||||
}
|
}
|
||||||
|
searchValue={searchValue}
|
||||||
onSearchChange={setSearchValueImpl}
|
onSearchChange={setSearchValueImpl}
|
||||||
renderOption={getRenderOptions(products)}
|
renderOption={getRenderOptions(products)}
|
||||||
searchable
|
searchable
|
||||||
|
|||||||
Reference in New Issue
Block a user