How to implement InfiniteSelect correctly?
I am using the following code to generate and fill a Select in an Edit.
The above select is then embedded with the following code:
The field is correctly loads data and search works. But saving the resource does not update the field, i.e. onFinish receives only the old value for the invoice_id.
export const InfiniteSelect: React.FC<EndlessSelectProps> = ({ resource, optionLabel, optionValue, defaultValue }) => {
const [page, setPage] = useState<number>(1);
const [options, setOptions] = useState<SelectProps["options"]>([]);
const [search, setSearch] = useState<string>("");
const hasMore = useRef(true)
const onSuccess = (data: any) => {
if (!data.data?.length) {
hasMore.current = false;
}
const normalizedData = data.data?.map((item: any) => ({
label: String(item[optionLabel]),
value: String(item[optionValue]),
}));
if (!search?.length) {
setOptions((prev) => [...(prev || []), ...normalizedData]);
} else {
setOptions(normalizedData);
}
}
const { selectProps } = useSelect({
resource: resource,
fetchSize: 20,
pagination: { current: page },
defaultValue: defaultValue,
queryOptions: {
keepPreviousData: true,
onSuccess: onSuccess,
},
defaultValueQueryOptions: {
keepPreviousData: true,
onSuccess: onSuccess,
},
onSearch: (value) => {
setPage(1);
hasMore.current = true;
setSearch(value);
return [
{
field: optionLabel,
operator: "eq",
value,
},
];
},
});
return <Select {...selectProps} defaultValue={String(defaultValue)} />
}export const InfiniteSelect: React.FC<EndlessSelectProps> = ({ resource, optionLabel, optionValue, defaultValue }) => {
const [page, setPage] = useState<number>(1);
const [options, setOptions] = useState<SelectProps["options"]>([]);
const [search, setSearch] = useState<string>("");
const hasMore = useRef(true)
const onSuccess = (data: any) => {
if (!data.data?.length) {
hasMore.current = false;
}
const normalizedData = data.data?.map((item: any) => ({
label: String(item[optionLabel]),
value: String(item[optionValue]),
}));
if (!search?.length) {
setOptions((prev) => [...(prev || []), ...normalizedData]);
} else {
setOptions(normalizedData);
}
}
const { selectProps } = useSelect({
resource: resource,
fetchSize: 20,
pagination: { current: page },
defaultValue: defaultValue,
queryOptions: {
keepPreviousData: true,
onSuccess: onSuccess,
},
defaultValueQueryOptions: {
keepPreviousData: true,
onSuccess: onSuccess,
},
onSearch: (value) => {
setPage(1);
hasMore.current = true;
setSearch(value);
return [
{
field: optionLabel,
operator: "eq",
value,
},
];
},
});
return <Select {...selectProps} defaultValue={String(defaultValue)} />
}The above select is then embedded with the following code:
export const IdEdit: React.FC<FormProp & { lineitemsData: any }> = ({ lineitemsData, ...props }) => {
return (
<Form.Item {...props} name="invoice_id" required={true}>
<InfiniteSelect defaultValue={lineitemsData?.invoice_id} resource="invoices" optionLabel="id" optionValue="id" />
</Form.Item>)
}export const IdEdit: React.FC<FormProp & { lineitemsData: any }> = ({ lineitemsData, ...props }) => {
return (
<Form.Item {...props} name="invoice_id" required={true}>
<InfiniteSelect defaultValue={lineitemsData?.invoice_id} resource="invoices" optionLabel="id" optionValue="id" />
</Form.Item>)
}The field is correctly loads data and search works. But saving the resource does not update the field, i.e. onFinish receives only the old value for the invoice_id.
