From a30cc3f15a6d51a5b895ccb97d58d550d9c487aa Mon Sep 17 00:00:00 2001 From: Gildas <1122076+djhi@users.noreply.github.com> Date: Tue, 8 Jul 2025 16:46:18 +0200 Subject: [PATCH 1/9] Introduce `` --- .../input/ReferenceArrayInputBase.spec.tsx | 52 +++++ .../input/ReferenceArrayInputBase.stories.tsx | 178 ++++++++++++++++++ .../input/ReferenceArrayInputBase.tsx | 109 +++++++++++ .../ra-core/src/controller/input/index.ts | 1 + .../src/input/ReferenceArrayInput.tsx | 35 +--- 5 files changed, 345 insertions(+), 30 deletions(-) create mode 100644 packages/ra-core/src/controller/input/ReferenceArrayInputBase.spec.tsx create mode 100644 packages/ra-core/src/controller/input/ReferenceArrayInputBase.stories.tsx create mode 100644 packages/ra-core/src/controller/input/ReferenceArrayInputBase.tsx diff --git a/packages/ra-core/src/controller/input/ReferenceArrayInputBase.spec.tsx b/packages/ra-core/src/controller/input/ReferenceArrayInputBase.spec.tsx new file mode 100644 index 00000000000..ba242af98f5 --- /dev/null +++ b/packages/ra-core/src/controller/input/ReferenceArrayInputBase.spec.tsx @@ -0,0 +1,52 @@ +import * as React from 'react'; +import { render, screen, waitFor } from '@testing-library/react'; +import { testDataProvider } from 'ra-core'; +import { Basic, WithError } from './ReferenceArrayInputBase.stories'; + +describe('', () => { + afterEach(async () => { + // wait for the getManyAggregate batch to resolve + await waitFor(() => new Promise(resolve => setTimeout(resolve, 0))); + }); + + it('should pass down the error if any occurred', async () => { + jest.spyOn(console, 'error').mockImplementation(() => {}); + render(); + await waitFor(() => { + expect(screen.queryByText('Error: fetch error')).not.toBeNull(); + }); + }); + it('should pass the correct resource down to child component', async () => { + render(); + await screen.findByText('Selected tags: 1, 3'); + }); + + it('should provide a ChoicesContext with all available choices', async () => { + render(); + await screen.findByText('Total tags: 5'); + }); + + it('should apply default values', async () => { + render(); + await screen.findByText('Selected tags: 1, 3'); + }); + + it('should accept meta in queryOptions', async () => { + const getList = jest + .fn() + .mockImplementationOnce(() => + Promise.resolve({ data: [], total: 25 }) + ); + const dataProvider = testDataProvider({ getList }); + render(); + await waitFor(() => { + expect(getList).toHaveBeenCalledWith('tags', { + filter: {}, + pagination: { page: 1, perPage: 25 }, + sort: { field: 'id', order: 'DESC' }, + meta: { foo: 'bar' }, + signal: undefined, + }); + }); + }); +}); diff --git a/packages/ra-core/src/controller/input/ReferenceArrayInputBase.stories.tsx b/packages/ra-core/src/controller/input/ReferenceArrayInputBase.stories.tsx new file mode 100644 index 00000000000..9c7df40bd92 --- /dev/null +++ b/packages/ra-core/src/controller/input/ReferenceArrayInputBase.stories.tsx @@ -0,0 +1,178 @@ +import * as React from 'react'; +import polyglotI18nProvider from 'ra-i18n-polyglot'; +import englishMessages from 'ra-language-english'; + +import { CoreAdmin } from '../../core/CoreAdmin'; +import { Resource } from '../../core/Resource'; +import { CreateBase } from '../../controller/create/CreateBase'; +import { testDataProvider } from '../../dataProvider/testDataProvider'; +import { DataProvider } from '../../types'; +import { Form } from '../../form/Form'; +import { useInput } from '../../form/useInput'; +import { InputProps } from '../../form/types'; +import { TestMemoryRouter } from '../../routing/TestMemoryRouter'; +import { + ReferenceArrayInputBase, + ReferenceArrayInputBaseProps, +} from './ReferenceArrayInputBase'; +import { ChoicesProps, useChoicesContext } from '../../form'; +import { useGetRecordRepresentation } from '../..'; + +export default { title: 'ra-core/controller/ReferenceArrayInputBase' }; + +const tags = [ + { id: 0, name: '3D' }, + { id: 1, name: 'Architecture' }, + { id: 2, name: 'Design' }, + { id: 3, name: 'Painting' }, + { id: 4, name: 'Photography' }, +]; + +const defaultDataProvider = testDataProvider({ + getList: () => + // @ts-ignore + Promise.resolve({ + data: tags, + total: tags.length, + }), + // @ts-ignore + getMany: (resource, params) => { + if (process.env.NODE_ENV !== 'test') { + console.log('getMany', resource, params); + } + return Promise.resolve({ + data: params.ids.map(id => tags.find(tag => tag.id === id)), + }); + }, +}); + +const i18nProvider = polyglotI18nProvider(() => englishMessages); + +const CheckboxGroupInput = ( + props: Omit & ChoicesProps +) => { + const { allChoices, isPending, error, resource, source, total } = + useChoicesContext(props); + const input = useInput({ ...props, source }); + const getRecordRepresentation = useGetRecordRepresentation(resource); + + if (isPending) { + return Loading...; + } + + if (error) { + return Error: {error.message}; + } + + return ( +
+ {allChoices.map(choice => ( + + ))} +
+ Selected {resource}: {input.field.value.join(', ')} +
+
+ Total {resource}: {total} +
+
+ ); +}; + +export const Basic = ({ + dataProvider = defaultDataProvider, + meta, + ...props +}: Partial & { + dataProvider?: DataProvider; + meta?: boolean; +}) => ( + + + +

Create Post

+
+ + + +
+ + } + /> + + +); + +Basic.args = { + meta: false, +}; + +Basic.argTypes = { + meta: { control: 'boolean' }, +}; + +export const WithError = () => ( + + Promise.reject(new Error('fetch error')), + getMany: () => + Promise.resolve({ data: [{ id: 5, name: 'test1' }] }), + } as unknown as DataProvider + } + i18nProvider={i18nProvider} + > + +

Create Post

+
{}} + defaultValues={{ tag_ids: [1, 3] }} + > + + + +
+ + } + /> + + +); diff --git a/packages/ra-core/src/controller/input/ReferenceArrayInputBase.tsx b/packages/ra-core/src/controller/input/ReferenceArrayInputBase.tsx new file mode 100644 index 00000000000..01fe62a7a5f --- /dev/null +++ b/packages/ra-core/src/controller/input/ReferenceArrayInputBase.tsx @@ -0,0 +1,109 @@ +import * as React from 'react'; +import { InputProps } from '../../form/types'; +import { + useReferenceArrayInputController, + type UseReferenceArrayInputParams, +} from './useReferenceArrayInputController'; +import { ResourceContextProvider } from '../../core/ResourceContextProvider'; +import { ChoicesContextProvider } from '../../form/choices/ChoicesContextProvider'; +import { RaRecord } from '../../types'; + +/** + * An Input component for fields containing a list of references to another resource. + * Useful for 'hasMany' relationship. + * + * @example + * The post object has many tags, so the post resource looks like: + * { + * id: 1234, + * tag_ids: [ "1", "23", "4" ] + * } + * + * ReferenceArrayInput component fetches the current resources (using + * `dataProvider.getMany()`) as well as possible resources (using + * `dataProvider.getList()`) in the reference endpoint. It then + * delegates rendering to its child component, to which it makes the possible + * choices available through the ChoicesContext. + * + * Use it with a selector component as child, like `` + * or . + * + * @example + * export const PostEdit = () => ( + * + * + * + * + * + * + * + * ); + * + * By default, restricts the possible values to 25. You can extend this limit + * by setting the `perPage` prop. + * + * @example + * + * + * + * + * By default, orders the possible values by id desc. You can change this order + * by setting the `sort` prop (an object with `field` and `order` properties). + * + * @example + * + * + * + * + * Also, you can filter the query used to populate the possible values. Use the + * `filter` prop for that. + * + * @example + * + * + * + * + * The enclosed component may filter results. ReferenceArrayInput create a ChoicesContext which provides + * a `setFilters` function. You can call this function to filter the results. + */ +export const ReferenceArrayInputBase = ( + props: ReferenceArrayInputBaseProps +) => { + const { children, reference, sort, filter = defaultFilter } = props; + if (React.Children.count(children) !== 1) { + throw new Error( + ' only accepts a single child (like )' + ); + } + + const controllerProps = useReferenceArrayInputController({ + ...props, + sort, + filter, + }); + + return ( + + + {children} + + + ); +}; + +const defaultFilter = {}; + +export interface ReferenceArrayInputBaseProps + extends InputProps, + UseReferenceArrayInputParams { + children: React.ReactNode; +} diff --git a/packages/ra-core/src/controller/input/index.ts b/packages/ra-core/src/controller/input/index.ts index d183217a3d0..d699b0bf3c6 100644 --- a/packages/ra-core/src/controller/input/index.ts +++ b/packages/ra-core/src/controller/input/index.ts @@ -7,6 +7,7 @@ import { export * from './useReferenceArrayInputController'; export * from './useReferenceInputController'; export * from './ReferenceInputBase'; +export * from './ReferenceArrayInputBase'; export { getStatusForInput, diff --git a/packages/ra-ui-materialui/src/input/ReferenceArrayInput.tsx b/packages/ra-ui-materialui/src/input/ReferenceArrayInput.tsx index ff2ffc811bc..d3ee1f64e95 100644 --- a/packages/ra-ui-materialui/src/input/ReferenceArrayInput.tsx +++ b/packages/ra-ui-materialui/src/input/ReferenceArrayInput.tsx @@ -1,12 +1,5 @@ import * as React from 'react'; -import { ReactElement } from 'react'; -import { - InputProps, - useReferenceArrayInputController, - ResourceContextProvider, - ChoicesContextProvider, - UseReferenceArrayInputParams, -} from 'ra-core'; +import { ReferenceArrayInputBase, ReferenceArrayInputBaseProps } from 'ra-core'; import { AutocompleteArrayInput } from './AutocompleteArrayInput'; /** @@ -77,40 +70,22 @@ import { AutocompleteArrayInput } from './AutocompleteArrayInput'; * a `setFilters` function. You can call this function to filter the results. */ export const ReferenceArrayInput = (props: ReferenceArrayInputProps) => { - const { - children = defaultChildren, - reference, - sort, - filter = defaultFilter, - } = props; + const { children = defaultChildren, ...rest } = props; if (React.Children.count(children) !== 1) { throw new Error( ' only accepts a single child (like )' ); } - const controllerProps = useReferenceArrayInputController({ - ...props, - sort, - filter, - }); - return ( - - - {children} - - + {children} ); }; const defaultChildren = ; -const defaultFilter = {}; export interface ReferenceArrayInputProps - extends InputProps, - UseReferenceArrayInputParams { - children?: ReactElement; + extends Omit { + children?: React.ReactNode; label?: string; - [key: string]: any; } From 90fd4d92d82b45231444a332cde96ccec7f67f81 Mon Sep 17 00:00:00 2001 From: Gildas <1122076+djhi@users.noreply.github.com> Date: Tue, 8 Jul 2025 16:52:19 +0200 Subject: [PATCH 2/9] Support render prop --- .../input/ReferenceArrayInputBase.stories.tsx | 64 ++++++++++++++++++- .../input/ReferenceArrayInputBase.tsx | 16 +++-- 2 files changed, 73 insertions(+), 7 deletions(-) diff --git a/packages/ra-core/src/controller/input/ReferenceArrayInputBase.stories.tsx b/packages/ra-core/src/controller/input/ReferenceArrayInputBase.stories.tsx index 9c7df40bd92..8194fb65fb3 100644 --- a/packages/ra-core/src/controller/input/ReferenceArrayInputBase.stories.tsx +++ b/packages/ra-core/src/controller/input/ReferenceArrayInputBase.stories.tsx @@ -15,7 +15,11 @@ import { ReferenceArrayInputBase, ReferenceArrayInputBaseProps, } from './ReferenceArrayInputBase'; -import { ChoicesProps, useChoicesContext } from '../../form'; +import { + ChoicesContextValue, + ChoicesProps, + useChoicesContext, +} from '../../form'; import { useGetRecordRepresentation } from '../..'; export default { title: 'ra-core/controller/ReferenceArrayInputBase' }; @@ -51,8 +55,15 @@ const i18nProvider = polyglotI18nProvider(() => englishMessages); const CheckboxGroupInput = ( props: Omit & ChoicesProps ) => { - const { allChoices, isPending, error, resource, source, total } = - useChoicesContext(props); + const choicesContext = useChoicesContext(props); + + return ; +}; + +const CheckboxGroupInputBase = ( + props: Omit & ChoicesProps & ChoicesContextValue +) => { + const { allChoices, isPending, error, resource, source, total } = props; const input = useInput({ ...props, source }); const getRecordRepresentation = useGetRecordRepresentation(resource); @@ -141,6 +152,53 @@ Basic.argTypes = { meta: { control: 'boolean' }, }; +export const WithRender = ({ + dataProvider = defaultDataProvider, + meta, + ...props +}: Partial & { + dataProvider?: DataProvider; + meta?: boolean; +}) => ( + + + +

Create Post

+
+ ( + + )} + /> + + + } + /> +
+ +); + +WithRender.args = { + meta: false, +}; + +WithRender.argTypes = { + meta: { control: 'boolean' }, +}; + export const WithError = () => ( ( props: ReferenceArrayInputBaseProps ) => { - const { children, reference, sort, filter = defaultFilter } = props; - if (React.Children.count(children) !== 1) { + const { children, filter = defaultFilter, reference, render, sort } = props; + if (children && React.Children.count(children) !== 1) { throw new Error( ' only accepts a single child (like )' ); } + if (!render && !children) { + throw new Error( + " requires either a 'render' prop or 'children' prop" + ); + } + const controllerProps = useReferenceArrayInputController({ ...props, sort, @@ -94,7 +101,7 @@ export const ReferenceArrayInputBase = ( return ( - {children} + {render ? render(controllerProps) : children} ); @@ -105,5 +112,6 @@ const defaultFilter = {}; export interface ReferenceArrayInputBaseProps extends InputProps, UseReferenceArrayInputParams { - children: React.ReactNode; + children?: React.ReactNode; + render?: (context: ChoicesContextValue) => React.ReactNode; } From 986d8a50044a5000e717eec61fc47fc6613b08f1 Mon Sep 17 00:00:00 2001 From: Gildas Garcia <1122076+djhi@users.noreply.github.com> Date: Wed, 9 Jul 2025 11:46:03 +0200 Subject: [PATCH 3/9] Apply suggestions from code review Co-authored-by: Jean-Baptiste Kaiser --- .../ra-core/src/controller/input/ReferenceArrayInputBase.tsx | 2 +- packages/ra-ui-materialui/src/input/ReferenceArrayInput.tsx | 3 +-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/ra-core/src/controller/input/ReferenceArrayInputBase.tsx b/packages/ra-core/src/controller/input/ReferenceArrayInputBase.tsx index 092921908c3..b3330ff0946 100644 --- a/packages/ra-core/src/controller/input/ReferenceArrayInputBase.tsx +++ b/packages/ra-core/src/controller/input/ReferenceArrayInputBase.tsx @@ -88,7 +88,7 @@ export const ReferenceArrayInputBase = ( if (!render && !children) { throw new Error( - " requires either a 'render' prop or 'children' prop" + " requires either a 'render' prop or 'children' prop" ); } diff --git a/packages/ra-ui-materialui/src/input/ReferenceArrayInput.tsx b/packages/ra-ui-materialui/src/input/ReferenceArrayInput.tsx index d3ee1f64e95..9977564df6f 100644 --- a/packages/ra-ui-materialui/src/input/ReferenceArrayInput.tsx +++ b/packages/ra-ui-materialui/src/input/ReferenceArrayInput.tsx @@ -85,7 +85,6 @@ export const ReferenceArrayInput = (props: ReferenceArrayInputProps) => { const defaultChildren = ; export interface ReferenceArrayInputProps - extends Omit { - children?: React.ReactNode; + extends ReferenceArrayInputBaseProps { label?: string; } From 6cc4819b4745a0e8399c48f2df85c60496f5d47e Mon Sep 17 00:00:00 2001 From: Gildas <1122076+djhi@users.noreply.github.com> Date: Wed, 9 Jul 2025 11:56:12 +0200 Subject: [PATCH 4/9] Fix JSDoc --- .../input/ReferenceArrayInputBase.tsx | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/ra-core/src/controller/input/ReferenceArrayInputBase.tsx b/packages/ra-core/src/controller/input/ReferenceArrayInputBase.tsx index b3330ff0946..b5e1312efba 100644 --- a/packages/ra-core/src/controller/input/ReferenceArrayInputBase.tsx +++ b/packages/ra-core/src/controller/input/ReferenceArrayInputBase.tsx @@ -20,7 +20,7 @@ import { ChoicesContextValue } from '../../form'; * tag_ids: [ "1", "23", "4" ] * } * - * ReferenceArrayInput component fetches the current resources (using + * ReferenceArrayInputBase component fetches the current resources (using * `dataProvider.getMany()`) as well as possible resources (using * `dataProvider.getList()`) in the reference endpoint. It then * delegates rendering to its child component, to which it makes the possible @@ -33,9 +33,9 @@ import { ChoicesContextValue } from '../../form'; * export const PostEdit = () => ( * * - * + * * - * + * * * * ); @@ -44,36 +44,36 @@ import { ChoicesContextValue } from '../../form'; * by setting the `perPage` prop. * * @example - * * - * + * * * By default, orders the possible values by id desc. You can change this order * by setting the `sort` prop (an object with `field` and `order` properties). * * @example - * * - * + * * * Also, you can filter the query used to populate the possible values. Use the * `filter` prop for that. * * @example - * * - * + * * - * The enclosed component may filter results. ReferenceArrayInput create a ChoicesContext which provides + * The enclosed component may filter results. ReferenceArrayInputBase create a ChoicesContext which provides * a `setFilters` function. You can call this function to filter the results. */ export const ReferenceArrayInputBase = ( From f4d24a737754d04b3886e343313276e0b8ac0c33 Mon Sep 17 00:00:00 2001 From: Gildas <1122076+djhi@users.noreply.github.com> Date: Wed, 9 Jul 2025 11:56:18 +0200 Subject: [PATCH 5/9] Comment tests --- .../src/controller/input/ReferenceArrayInputBase.spec.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/ra-core/src/controller/input/ReferenceArrayInputBase.spec.tsx b/packages/ra-core/src/controller/input/ReferenceArrayInputBase.spec.tsx index ba242af98f5..4cd887b2709 100644 --- a/packages/ra-core/src/controller/input/ReferenceArrayInputBase.spec.tsx +++ b/packages/ra-core/src/controller/input/ReferenceArrayInputBase.spec.tsx @@ -18,6 +18,7 @@ describe('', () => { }); it('should pass the correct resource down to child component', async () => { render(); + // Check that the child component receives the correct resource (tags) await screen.findByText('Selected tags: 1, 3'); }); @@ -28,6 +29,7 @@ describe('', () => { it('should apply default values', async () => { render(); + // Check that the default values are applied (1, 3) await screen.findByText('Selected tags: 1, 3'); }); From 3d31c73418f0bb2053d80e6826aae215a8b0c756 Mon Sep 17 00:00:00 2001 From: Gildas <1122076+djhi@users.noreply.github.com> Date: Wed, 9 Jul 2025 11:56:36 +0200 Subject: [PATCH 6/9] Fix format --- packages/ra-ui-materialui/src/input/ReferenceArrayInput.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/ra-ui-materialui/src/input/ReferenceArrayInput.tsx b/packages/ra-ui-materialui/src/input/ReferenceArrayInput.tsx index 9977564df6f..fa831679adc 100644 --- a/packages/ra-ui-materialui/src/input/ReferenceArrayInput.tsx +++ b/packages/ra-ui-materialui/src/input/ReferenceArrayInput.tsx @@ -84,7 +84,6 @@ export const ReferenceArrayInput = (props: ReferenceArrayInputProps) => { const defaultChildren = ; -export interface ReferenceArrayInputProps - extends ReferenceArrayInputBaseProps { +export interface ReferenceArrayInputProps extends ReferenceArrayInputBaseProps { label?: string; } From 50fc7d0044d12f93696243ee574ebd9749685434 Mon Sep 17 00:00:00 2001 From: Gildas <1122076+djhi@users.noreply.github.com> Date: Wed, 9 Jul 2025 12:06:23 +0200 Subject: [PATCH 7/9] Fix error message about single child --- .../ra-core/src/controller/input/ReferenceArrayInputBase.tsx | 2 +- packages/ra-ui-materialui/src/input/ReferenceArrayInput.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/ra-core/src/controller/input/ReferenceArrayInputBase.tsx b/packages/ra-core/src/controller/input/ReferenceArrayInputBase.tsx index b5e1312efba..20772908911 100644 --- a/packages/ra-core/src/controller/input/ReferenceArrayInputBase.tsx +++ b/packages/ra-core/src/controller/input/ReferenceArrayInputBase.tsx @@ -82,7 +82,7 @@ export const ReferenceArrayInputBase = ( const { children, filter = defaultFilter, reference, render, sort } = props; if (children && React.Children.count(children) !== 1) { throw new Error( - ' only accepts a single child (like )' + ' only accepts a single child (like )' ); } diff --git a/packages/ra-ui-materialui/src/input/ReferenceArrayInput.tsx b/packages/ra-ui-materialui/src/input/ReferenceArrayInput.tsx index fa831679adc..830ee8a8692 100644 --- a/packages/ra-ui-materialui/src/input/ReferenceArrayInput.tsx +++ b/packages/ra-ui-materialui/src/input/ReferenceArrayInput.tsx @@ -73,7 +73,7 @@ export const ReferenceArrayInput = (props: ReferenceArrayInputProps) => { const { children = defaultChildren, ...rest } = props; if (React.Children.count(children) !== 1) { throw new Error( - ' only accepts a single child (like )' + ' only accepts a single child (like )' ); } From 5904c1c19fd5aefc4b16e12966d8d9b4093014bc Mon Sep 17 00:00:00 2001 From: Gildas <1122076+djhi@users.noreply.github.com> Date: Wed, 9 Jul 2025 12:06:33 +0200 Subject: [PATCH 8/9] Improve stories --- .../src/input/ReferenceArrayInput.stories.tsx | 49 ++++++++++--------- 1 file changed, 26 insertions(+), 23 deletions(-) diff --git a/packages/ra-ui-materialui/src/input/ReferenceArrayInput.stories.tsx b/packages/ra-ui-materialui/src/input/ReferenceArrayInput.stories.tsx index 19830fb0f19..d50c2ef1d56 100644 --- a/packages/ra-ui-materialui/src/input/ReferenceArrayInput.stories.tsx +++ b/packages/ra-ui-materialui/src/input/ReferenceArrayInput.stories.tsx @@ -2,15 +2,16 @@ import * as React from 'react'; import { DataProvider, Form, + Resource, testDataProvider, TestMemoryRouter, } from 'ra-core'; import polyglotI18nProvider from 'ra-i18n-polyglot'; import englishMessages from 'ra-language-english'; -import { Admin, Resource } from 'react-admin'; import fakeRestProvider from 'ra-data-fakerest'; import { AdminContext } from '../AdminContext'; +import { AdminUI } from '../AdminUI'; import { Create, Edit } from '../detail'; import { SimpleForm } from '../form'; import { DatagridInput, TextInput } from '../input'; @@ -31,8 +32,8 @@ const tags = [ ]; const dataProvider = testDataProvider({ - // @ts-ignore getList: () => + // @ts-ignore Promise.resolve({ data: tags, total: tags.length, @@ -50,27 +51,29 @@ const i18nProvider = polyglotI18nProvider(() => englishMessages); export const Basic = () => ( - - - ( - - - - - - )} - /> - + + + + ( + + + + + + )} + /> + + ); From a08fbf03ad57f233033d8e4078ffb8aeb8f86938 Mon Sep 17 00:00:00 2001 From: Gildas <1122076+djhi@users.noreply.github.com> Date: Wed, 9 Jul 2025 16:59:33 +0200 Subject: [PATCH 9/9] Fix typo in ReferenceArrayInput documentation --- docs/ReferenceArrayInput.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/ReferenceArrayInput.md b/docs/ReferenceArrayInput.md index d0bd52fa11a..4c01437949d 100644 --- a/docs/ReferenceArrayInput.md +++ b/docs/ReferenceArrayInput.md @@ -114,7 +114,7 @@ See the [`children`](#children) section for more details. ## `children` -By default, `` renders an [``](./AutocompleteArrayInput.md) to let end users select the reference record. +By default, `` renders an [``](./AutocompleteArrayInput.md) to let end users select the reference record. You can pass a child component to customize the way the reference selector is displayed.