diff --git a/packages/ra-core/src/controller/input/useReferenceInputController.spec.tsx b/packages/ra-core/src/controller/input/useReferenceInputController.spec.tsx index 249ef374143..f77b6f11fd8 100644 --- a/packages/ra-core/src/controller/input/useReferenceInputController.spec.tsx +++ b/packages/ra-core/src/controller/input/useReferenceInputController.spec.tsx @@ -3,12 +3,20 @@ import { useState, useCallback, ReactElement } from 'react'; import { render, screen, fireEvent, waitFor } from '@testing-library/react'; import expect from 'expect'; -import { useReferenceInputController } from './useReferenceInputController'; +import { + useReferenceInputController, + UseReferenceInputControllerParams, +} from './useReferenceInputController'; import { CoreAdminContext } from '../../core'; -import { Form, useInput } from '../../form'; +import { ChoicesContextValue, Form, useInput } from '../../form'; import { testDataProvider } from '../../dataProvider'; +import { SortPayload } from '../../types'; -const ReferenceInputController = props => { +const ReferenceInputController = ( + props: UseReferenceInputControllerParams & { + children: (options: ChoicesContextValue) => React.ReactNode; + } +) => { const { children, ...rest } = props; const inputProps = useInput({ ...rest, @@ -160,7 +168,6 @@ describe('useReferenceInputController', () => {
{children} @@ -210,7 +217,10 @@ describe('useReferenceInputController', () => { it('should refetch reference getList when its props change', async () => { const children = jest.fn().mockReturnValue(

child

); const Component = () => { - const [sort, setSort] = useState({ field: 'title', order: 'ASC' }); + const [sort, setSort] = useState({ + field: 'title', + order: 'ASC', + }); const handleClick = useCallback( () => setSort({ field: 'body', order: 'DESC' }), [setSort] diff --git a/packages/ra-core/src/controller/input/useReferenceInputController.ts b/packages/ra-core/src/controller/input/useReferenceInputController.ts index 7ddbced53d2..2a384ea084b 100644 --- a/packages/ra-core/src/controller/input/useReferenceInputController.ts +++ b/packages/ra-core/src/controller/input/useReferenceInputController.ts @@ -1,12 +1,17 @@ import { useCallback, useEffect, useMemo, useState } from 'react'; import { useWatch } from 'react-hook-form'; -import type { UseQueryOptions } from '@tanstack/react-query'; +import { keepPreviousData, type UseQueryOptions } from '@tanstack/react-query'; import { useGetList } from '../../dataProvider'; import { useReference } from '../useReference'; import { useReferenceParams } from './useReferenceParams'; import { useWrappedSource } from '../../core'; -import type { FilterPayload, RaRecord, SortPayload } from '../../types'; +import type { + FilterPayload, + GetListResult, + RaRecord, + SortPayload, +} from '../../types'; import type { ChoicesContextValue } from '../../form'; /** @@ -45,7 +50,7 @@ import type { ChoicesContextValue } from '../../form'; * }); */ export const useReferenceInputController = ( - props: UseReferenceInputControllerParams + props: UseReferenceInputControllerParams ): ChoicesContextValue => { const { debounce, @@ -100,8 +105,10 @@ export const useReferenceInputController = ( }, { enabled: isGetMatchingEnabled, - placeholderData: previousData => previousData, - ...otherQueryOptions, + placeholderData: keepPreviousData, + ...(otherQueryOptions as UseQueryOptions< + GetListResult + >), } ); @@ -205,14 +212,11 @@ export interface UseReferenceInputControllerParams< debounce?: number; filter?: FilterPayload; queryOptions?: Omit< - UseQueryOptions<{ - data: RecordType[]; - total?: number; - pageInfo?: { - hasNextPage?: boolean; - hasPreviousPage?: boolean; - }; - }>, + UseQueryOptions< + | GetListResult + // useReference calls getManyAggregate, which returns a an array of records + | RecordType[] + >, 'queryFn' | 'queryKey' > & { meta?: any }; page?: number;