From aef275f956e9f3b30979018bf50d3a27df8566d1 Mon Sep 17 00:00:00 2001
From: djhi <1122076+djhi@users.noreply.github.com>
Date: Mon, 8 Feb 2021 18:09:11 +0100
Subject: [PATCH 01/16] Add ListContext to ReferenceArrayInput

---
 .../field/useReferenceArrayFieldController.ts |   9 +-
 .../input/ReferenceArrayInputController.tsx   |  88 +++++-------
 .../input/useReferenceArrayInputController.ts | 135 ++++++++++++++++--
 packages/ra-core/src/util/index.ts            |   1 +
 packages/ra-core/src/util/indexById.ts        |   9 ++
 .../src/input/ReferenceArrayInput.tsx         | 104 ++++++++------
 6 files changed, 227 insertions(+), 119 deletions(-)
 create mode 100644 packages/ra-core/src/util/indexById.ts

diff --git a/packages/ra-core/src/controller/field/useReferenceArrayFieldController.ts b/packages/ra-core/src/controller/field/useReferenceArrayFieldController.ts
index 7b2bf4555f4..25441498935 100644
--- a/packages/ra-core/src/controller/field/useReferenceArrayFieldController.ts
+++ b/packages/ra-core/src/controller/field/useReferenceArrayFieldController.ts
@@ -11,6 +11,7 @@ import usePaginationState from '../usePaginationState';
 import useSelectionState from '../useSelectionState';
 import useSortState from '../useSortState';
 import { useResourceContext } from '../../core';
+import { indexById } from '../../util/indexById';
 
 interface Option {
     basePath: string;
@@ -239,12 +240,4 @@ const useReferenceArrayFieldController = (
     };
 };
 
-const indexById = (records: Record[] = []): RecordMap =>
-    records
-        .filter(r => typeof r !== 'undefined')
-        .reduce((prev, current) => {
-            prev[current.id] = current;
-            return prev;
-        }, {});
-
 export default useReferenceArrayFieldController;
diff --git a/packages/ra-core/src/controller/input/ReferenceArrayInputController.tsx b/packages/ra-core/src/controller/input/ReferenceArrayInputController.tsx
index c6fb8564f15..c30ff7b5f82 100644
--- a/packages/ra-core/src/controller/input/ReferenceArrayInputController.tsx
+++ b/packages/ra-core/src/controller/input/ReferenceArrayInputController.tsx
@@ -1,41 +1,9 @@
-import {
-    ComponentType,
-    FunctionComponent,
-    ReactElement,
-    useCallback,
-} from 'react';
+import { ComponentType, ReactElement, useCallback } from 'react';
 import debounce from 'lodash/debounce';
 
 import { Record, SortPayload, PaginationPayload } from '../../types';
 import useReferenceArrayInputController from './useReferenceArrayInputController';
 
-interface ChildrenFuncParams {
-    choices: Record[];
-    error?: string;
-    loaded: boolean;
-    loading: boolean;
-    setFilter: (filter: any) => void;
-    setPagination: (pagination: PaginationPayload) => void;
-    setSort: (sort: SortPayload) => void;
-    warning?: string;
-}
-
-interface Props {
-    allowEmpty?: boolean;
-    basePath: string;
-    children: (params: ChildrenFuncParams) => ReactElement;
-    filter?: object;
-    filterToQuery?: (filter: {}) => any;
-    input?: any;
-    meta?: object;
-    perPage?: number;
-    record?: Record;
-    reference: string;
-    resource: string;
-    sort?: SortPayload;
-    source: string;
-}
-
 /**
  * An Input component for fields containing a list of references to another resource.
  * Useful for 'hasMany' relationship.
@@ -114,7 +82,7 @@ interface Props {
  *     <SelectArrayInput optionText="name" />
  * </ReferenceArrayInput>
  */
-const ReferenceArrayInputController: FunctionComponent<Props> = ({
+const ReferenceArrayInputController = ({
     basePath,
     children,
     filter = {},
@@ -125,17 +93,8 @@ const ReferenceArrayInputController: FunctionComponent<Props> = ({
     resource,
     sort = { field: 'id', order: 'DESC' },
     source,
-}) => {
-    const {
-        choices,
-        error,
-        loaded,
-        loading,
-        setFilter,
-        setPagination,
-        setSort,
-        warning,
-    } = useReferenceArrayInputController({
+}: ReferenceArrayInputControllerProps) => {
+    const { setFilter, ...controllerProps } = useReferenceArrayInputController({
         basePath,
         filter,
         filterToQuery,
@@ -153,15 +112,38 @@ const ReferenceArrayInputController: FunctionComponent<Props> = ({
     ]);
 
     return children({
-        choices,
-        error,
-        loaded,
-        loading,
+        ...controllerProps,
         setFilter: debouncedSetFilter,
-        setPagination,
-        setSort,
-        warning,
     });
 };
 
-export default ReferenceArrayInputController as ComponentType<Props>;
+interface ChildrenFuncParams {
+    choices: Record[];
+    error?: string;
+    loaded: boolean;
+    loading: boolean;
+    setFilter: (filter: any) => void;
+    setPagination: (pagination: PaginationPayload) => void;
+    setSort: (sort: SortPayload) => void;
+    warning?: string;
+}
+
+interface ReferenceArrayInputControllerProps {
+    allowEmpty?: boolean;
+    basePath: string;
+    children: (params: ChildrenFuncParams) => ReactElement;
+    filter?: object;
+    filterToQuery?: (filter: {}) => any;
+    input?: any;
+    meta?: object;
+    perPage?: number;
+    record?: Record;
+    reference: string;
+    resource: string;
+    sort?: SortPayload;
+    source: string;
+}
+
+export default ReferenceArrayInputController as ComponentType<
+    ReferenceArrayInputControllerProps
+>;
diff --git a/packages/ra-core/src/controller/input/useReferenceArrayInputController.ts b/packages/ra-core/src/controller/input/useReferenceArrayInputController.ts
index 026679fc300..eba2da5580a 100644
--- a/packages/ra-core/src/controller/input/useReferenceArrayInputController.ts
+++ b/packages/ra-core/src/controller/input/useReferenceArrayInputController.ts
@@ -1,4 +1,4 @@
-import { useMemo, useState, useEffect, useRef } from 'react';
+import { useMemo, useState, useEffect, useRef, useCallback } from 'react';
 import { useSelector } from 'react-redux';
 import isEqual from 'lodash/isEqual';
 import difference from 'lodash/difference';
@@ -14,6 +14,9 @@ import useGetMatching from '../../dataProvider/useGetMatching';
 import { useTranslate } from '../../i18n';
 import { getStatusForArrayInput as getDataStatus } from './referenceDataStatus';
 import { useResourceContext } from '../../core';
+import { usePaginationState, useSelectionState, useSortState } from '..';
+import { ListControllerProps } from '../useListController';
+import { indexById, removeEmpty, useSafeSetState } from '../../util';
 
 /**
  * Prepare data for the ReferenceArrayInput components
@@ -41,13 +44,15 @@ import { useResourceContext } from '../../core';
  */
 const useReferenceArrayInputController = (
     props: Option
-): ReferenceArrayInputProps => {
+): ReferenceArrayInputProps & Omit<ListControllerProps, 'setSort'> => {
     const {
+        basePath,
         filter: defaultFilter,
         filterToQuery = defaultFilterToQuery,
         input,
-        perPage = 25,
-        sort: defaultSort = { field: 'id', order: 'DESC' },
+        page: initialPage = 1,
+        perPage: initialPerPage = 25,
+        sort: initialSort = { field: 'id', order: 'DESC' },
         options,
         reference,
         source,
@@ -105,16 +110,43 @@ const useReferenceArrayInputController = (
         setIdsToGetFromStore,
     ]);
 
-    const [pagination, setPagination] = useState({ page: 1, perPage });
-    const [sort, setSort] = useState(defaultSort);
-    const [filter, setFilter] = useState('');
+    // pagination logic
+    const {
+        page,
+        setPage,
+        perPage,
+        setPerPage,
+        pagination,
+        setPagination,
+    } = usePaginationState({
+        page: initialPage,
+        perPage: initialPerPage,
+    });
+
+    // selection logic
+    const {
+        selectedIds,
+        onSelect,
+        onToggleItem,
+        onUnselectItems,
+    } = useSelectionState();
+
+    // sort logic
+    const { sort, setSort } = useSortState(initialSort);
+    const setSortForList = useCallback(
+        (field: string, order: string = 'ASC') => {
+            setSort({ field, order });
+            setPage(1);
+        },
+        [setPage, setSort]
+    );
 
     // Ensure sort can be updated through props too, not just by using the setSort function
     useEffect(() => {
-        if (!isEqual(defaultSort, sort)) {
-            setSort(defaultSort);
+        if (!isEqual(initialSort, sort)) {
+            setSort(initialSort);
         }
-    }, [setSort, defaultSort, sort]);
+    }, [setSort, initialSort, sort]);
 
     // Ensure pagination can be updated through props too, not just by using the setPagination function
     useEffect(() => {
@@ -127,13 +159,65 @@ const useReferenceArrayInputController = (
         }
     }, [setPagination, perPage, pagination]);
 
+    // filter logic
+    const [queryFilter, setFilter] = useState('');
+    const filterRef = useRef(defaultFilter);
+    const [displayedFilters, setDisplayedFilters] = useSafeSetState<{
+        [key: string]: boolean;
+    }>({});
+    const [filterValues, setFilterValues] = useSafeSetState<{
+        [key: string]: any;
+    }>(defaultFilter);
+    const hideFilter = useCallback(
+        (filterName: string) => {
+            setDisplayedFilters(previousState => {
+                const { [filterName]: _, ...newState } = previousState;
+                return newState;
+            });
+            setFilterValues(previousState => {
+                const { [filterName]: _, ...newState } = previousState;
+                return newState;
+            });
+        },
+        [setDisplayedFilters, setFilterValues]
+    );
+    const showFilter = useCallback(
+        (filterName: string, defaultValue: any) => {
+            setDisplayedFilters(previousState => ({
+                ...previousState,
+                [filterName]: true,
+            }));
+            setFilterValues(previousState => ({
+                ...previousState,
+                [filterName]: defaultValue,
+            }));
+        },
+        [setDisplayedFilters, setFilterValues]
+    );
+    const setFilters = useCallback(
+        (filters, displayedFilters) => {
+            setFilterValues(removeEmpty(filters));
+            setDisplayedFilters(displayedFilters);
+            setPage(1);
+        },
+        [setDisplayedFilters, setFilterValues, setPage]
+    );
+
+    // handle filter prop change
+    useEffect(() => {
+        if (!isEqual(defaultFilter, filterRef.current)) {
+            filterRef.current = defaultFilter;
+            setFilterValues(defaultFilter);
+        }
+    });
+
     // Merge the user filters with the default ones
     const finalFilter = useMemo(
         () => ({
             ...defaultFilter,
-            ...filterToQuery(filter),
+            ...filterToQuery(queryFilter),
         }),
-        [defaultFilter, filter, filterToQuery]
+        [queryFilter, defaultFilter, filterToQuery]
     );
 
     const { data: referenceRecordsFetched, loaded } = useGetMany(
@@ -148,7 +232,7 @@ const useReferenceArrayInputController = (
     // filter out not found references - happens when the dataProvider doesn't guarantee referential integrity
     const finalReferenceRecords = referenceRecords.filter(Boolean);
 
-    const { data: matchingReferences } = useGetMatching(
+    const { data: matchingReferences, total } = useGetMatching(
         reference,
         pagination,
         sort,
@@ -175,14 +259,37 @@ const useReferenceArrayInputController = (
     });
 
     return {
+        basePath: basePath.replace(resource, reference),
         choices: dataStatus.choices,
+        currentSort: sort,
+        data: indexById(dataStatus.choices),
+        displayedFilters,
         error: dataStatus.error,
+        filterValues,
+        hasCreate: false,
+        hideFilter,
+        ids: dataStatus.choices
+            .filter(data => typeof data !== 'undefined')
+            .map(data => data.id),
         loaded,
         loading: dataStatus.waiting,
+        onSelect,
+        onToggleItem,
+        onUnselectItems,
+        page,
+        perPage,
+        resource,
+        selectedIds,
         setFilter,
+        setFilters,
+        setPage,
         setPagination,
+        setPerPage,
         setSort,
+        setSortForList,
+        showFilter,
         warning: dataStatus.warning,
+        total,
     };
 };
 
@@ -219,6 +326,7 @@ interface ReferenceArrayInputProps {
     setFilter: (filter: any) => void;
     setPagination: (pagination: PaginationPayload) => void;
     setSort: (sort: SortPayload) => void;
+    setSortForList: (sort: string, order?: string) => void;
 }
 
 interface Option {
@@ -227,6 +335,7 @@ interface Option {
     filterToQuery?: (filter: any) => any;
     input: FieldInputProps<any, HTMLElement>;
     options?: any;
+    page?: number;
     perPage?: number;
     record?: Record;
     reference: string;
diff --git a/packages/ra-core/src/util/index.ts b/packages/ra-core/src/util/index.ts
index 1f4fae76dca..21d2d79f8e3 100644
--- a/packages/ra-core/src/util/index.ts
+++ b/packages/ra-core/src/util/index.ts
@@ -11,6 +11,7 @@ import resolveRedirectTo from './resolveRedirectTo';
 import warning from './warning';
 import useWhyDidYouUpdate from './useWhyDidYouUpdate';
 import { useSafeSetState, useTimeout } from './hooks';
+export * from './indexById';
 
 export {
     escapePath,
diff --git a/packages/ra-core/src/util/indexById.ts b/packages/ra-core/src/util/indexById.ts
new file mode 100644
index 00000000000..bae5a1b5c8a
--- /dev/null
+++ b/packages/ra-core/src/util/indexById.ts
@@ -0,0 +1,9 @@
+import { Record, RecordMap } from '../types';
+
+export const indexById = (records: Record[] = []): RecordMap =>
+    records
+        .filter(r => typeof r !== 'undefined')
+        .reduce((prev, current) => {
+            prev[current.id] = current;
+            return prev;
+        }, {});
diff --git a/packages/ra-ui-materialui/src/input/ReferenceArrayInput.tsx b/packages/ra-ui-materialui/src/input/ReferenceArrayInput.tsx
index ba18b763c61..311a0d34e5f 100644
--- a/packages/ra-ui-materialui/src/input/ReferenceArrayInput.tsx
+++ b/packages/ra-ui-materialui/src/input/ReferenceArrayInput.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FC, ReactElement } from 'react';
+import { ReactElement, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import {
     getFieldLabelTranslationArgs,
@@ -11,6 +11,7 @@ import {
     PaginationPayload,
     Translate,
     ResourceContextProvider,
+    ListContextProvider,
 } from 'ra-core';
 
 import sanitizeInputRestProps from './sanitizeInputRestProps';
@@ -107,7 +108,7 @@ export interface ReferenceArrayInputProps extends InputProps {
  *     <SelectArrayInput optionText="name" />
  * </ReferenceArrayInput>
  */
-const ReferenceArrayInput: FC<ReferenceArrayInputProps> = ({
+const ReferenceArrayInput = ({
     children,
     id: idOverride,
     onBlur,
@@ -117,7 +118,7 @@ const ReferenceArrayInput: FC<ReferenceArrayInputProps> = ({
     parse,
     format,
     ...props
-}) => {
+}: ReferenceArrayInputProps) => {
     if (React.Children.count(children) !== 1) {
         throw new Error(
             '<ReferenceArrayInput> only accepts a single child (like <Datagrid>)'
@@ -136,24 +137,41 @@ const ReferenceArrayInput: FC<ReferenceArrayInputProps> = ({
         ...props,
     });
 
-    const controllerProps = useReferenceArrayInputController({
+    const {
+        setSort,
+        setSortForList,
+        ...controllerProps
+    } = useReferenceArrayInputController({
         ...props,
         input,
     });
 
+    const listContext = useMemo(
+        () => ({
+            ...controllerProps,
+            setSort: setSortForList,
+        }),
+        [controllerProps, setSortForList]
+    );
+
     const translate = useTranslate();
 
     return (
-        <ReferenceArrayInputView
-            id={id}
-            input={input}
-            isRequired={isRequired}
-            meta={meta}
-            translate={translate}
-            children={children}
-            {...props}
-            {...controllerProps}
-        />
+        <ResourceContextProvider value={props.reference}>
+            <ListContextProvider value={listContext}>
+                <ReferenceArrayInputView
+                    id={id}
+                    input={input}
+                    isRequired={isRequired}
+                    meta={meta}
+                    translate={translate}
+                    children={children}
+                    setSort={setSort}
+                    {...props}
+                    {...controllerProps}
+                />
+            </ListContextProvider>
+        </ResourceContextProvider>
     );
 };
 
@@ -256,37 +274,33 @@ export const ReferenceArrayInputView = ({
         return <ReferenceError label={translatedLabel} error={error} />;
     }
 
-    return (
-        <ResourceContextProvider value={reference}>
-            {React.cloneElement(children, {
-                allowEmpty,
-                basePath,
-                choices,
-                className,
-                error,
-                input,
-                isRequired,
-                label: translatedLabel,
-                loaded,
-                loading,
-                meta: {
-                    ...meta,
-                    helperText: warning || false,
-                },
-                onChange,
-                options,
-                resource,
-                setFilter,
-                setPagination,
-                setSort,
-                source,
-                translateChoice: false,
-                limitChoicesToValue: true,
-                ...sanitizeRestProps(rest),
-                ...children.props,
-            })}
-        </ResourceContextProvider>
-    );
+    return React.cloneElement(children, {
+        allowEmpty,
+        basePath,
+        choices,
+        className,
+        error,
+        input,
+        isRequired,
+        label: translatedLabel,
+        loaded,
+        loading,
+        meta: {
+            ...meta,
+            helperText: warning || false,
+        },
+        onChange,
+        options,
+        resource,
+        setFilter,
+        setPagination,
+        setSort,
+        source,
+        translateChoice: false,
+        limitChoicesToValue: true,
+        ...sanitizeRestProps(rest),
+        ...children.props,
+    });
 };
 
 ReferenceArrayInputView.propTypes = {

From f9ad42b04a3f801957097ecb4581f25f7bf1a3ae Mon Sep 17 00:00:00 2001
From: djhi <1122076+djhi@users.noreply.github.com>
Date: Mon, 8 Feb 2021 18:33:12 +0100
Subject: [PATCH 02/16] Fix sort

---
 .../controller/input/useReferenceArrayInputController.ts    | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/ra-core/src/controller/input/useReferenceArrayInputController.ts b/packages/ra-core/src/controller/input/useReferenceArrayInputController.ts
index eba2da5580a..a10918687f2 100644
--- a/packages/ra-core/src/controller/input/useReferenceArrayInputController.ts
+++ b/packages/ra-core/src/controller/input/useReferenceArrayInputController.ts
@@ -132,9 +132,11 @@ const useReferenceArrayInputController = (
     } = useSelectionState();
 
     // sort logic
+    const sortRef = useRef(initialSort);
     const { sort, setSort } = useSortState(initialSort);
     const setSortForList = useCallback(
         (field: string, order: string = 'ASC') => {
+            console.log({ field, order });
             setSort({ field, order });
             setPage(1);
         },
@@ -143,10 +145,10 @@ const useReferenceArrayInputController = (
 
     // Ensure sort can be updated through props too, not just by using the setSort function
     useEffect(() => {
-        if (!isEqual(initialSort, sort)) {
+        if (!isEqual(initialSort, sortRef.current)) {
             setSort(initialSort);
         }
-    }, [setSort, initialSort, sort]);
+    }, [setSort, initialSort]);
 
     // Ensure pagination can be updated through props too, not just by using the setPagination function
     useEffect(() => {

From e40913b4355234d3a693cbcc05436f6895b3b075 Mon Sep 17 00:00:00 2001
From: Gildas Garcia <1122076+djhi@users.noreply.github.com>
Date: Tue, 9 Feb 2021 12:10:22 +0100
Subject: [PATCH 03/16] Fix sorting

---
 .../input/useReferenceArrayInputController.ts | 23 +++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/packages/ra-core/src/controller/input/useReferenceArrayInputController.ts b/packages/ra-core/src/controller/input/useReferenceArrayInputController.ts
index a10918687f2..398360b53cf 100644
--- a/packages/ra-core/src/controller/input/useReferenceArrayInputController.ts
+++ b/packages/ra-core/src/controller/input/useReferenceArrayInputController.ts
@@ -1,6 +1,8 @@
 import { useMemo, useState, useEffect, useRef, useCallback } from 'react';
 import { useSelector } from 'react-redux';
 import isEqual from 'lodash/isEqual';
+import get from 'lodash/get';
+import sortBy from 'lodash/sortBy';
 import difference from 'lodash/difference';
 import {
     PaginationPayload,
@@ -17,6 +19,7 @@ import { useResourceContext } from '../../core';
 import { usePaginationState, useSelectionState, useSortState } from '..';
 import { ListControllerProps } from '../useListController';
 import { indexById, removeEmpty, useSafeSetState } from '../../util';
+import { SORT_DESC } from '../../reducer/admin/resource/list/queryReducer';
 
 /**
  * Prepare data for the ReferenceArrayInput components
@@ -136,7 +139,6 @@ const useReferenceArrayInputController = (
     const { sort, setSort } = useSortState(initialSort);
     const setSortForList = useCallback(
         (field: string, order: string = 'ASC') => {
-            console.log({ field, order });
             setSort({ field, order });
             setPage(1);
         },
@@ -260,6 +262,8 @@ const useReferenceArrayInputController = (
         translate,
     });
 
+    let sortedChoices = sortChoices(dataStatus.choices, sort);
+
     return {
         basePath: basePath.replace(resource, reference),
         choices: dataStatus.choices,
@@ -270,9 +274,7 @@ const useReferenceArrayInputController = (
         filterValues,
         hasCreate: false,
         hideFilter,
-        ids: dataStatus.choices
-            .filter(data => typeof data !== 'undefined')
-            .map(data => data.id),
+        ids: sortedChoices.map(choice => choice.id),
         loaded,
         loading: dataStatus.waiting,
         onSelect,
@@ -295,6 +297,19 @@ const useReferenceArrayInputController = (
     };
 };
 
+const sortChoices = (choices: Record[], sort: SortPayload) => {
+    let sortedChoices = sortBy(
+        choices.filter(choice => typeof choice !== 'undefined'),
+        choice => get(choice, sort.field)
+    );
+
+    if (sort.order === SORT_DESC) {
+        return sortedChoices.reverse();
+    }
+
+    return sortedChoices;
+};
+
 // concatenate and deduplicate two lists of records
 const mergeReferences = (ref1: Record[], ref2: Record[]): Record[] => {
     const res = [...ref1];

From 8300510bb670b0b6d0fb61152e86f612d690c4a1 Mon Sep 17 00:00:00 2001
From: Gildas Garcia <1122076+djhi@users.noreply.github.com>
Date: Tue, 9 Feb 2021 15:51:31 +0100
Subject: [PATCH 04/16] Ensure pagination works

---
 .../input/useReferenceArrayInputController.ts | 26 ++++++++++---------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/packages/ra-core/src/controller/input/useReferenceArrayInputController.ts b/packages/ra-core/src/controller/input/useReferenceArrayInputController.ts
index 398360b53cf..973cadf3d9b 100644
--- a/packages/ra-core/src/controller/input/useReferenceArrayInputController.ts
+++ b/packages/ra-core/src/controller/input/useReferenceArrayInputController.ts
@@ -153,15 +153,12 @@ const useReferenceArrayInputController = (
     }, [setSort, initialSort]);
 
     // Ensure pagination can be updated through props too, not just by using the setPagination function
+    const paginationRef = useRef({ initialPage, initialPerPage });
     useEffect(() => {
-        const newPagination = {
-            page: 1,
-            perPage,
-        };
-        if (!isEqual(newPagination, pagination)) {
-            setPagination(newPagination);
+        if (!isEqual({ initialPage, initialPerPage }, paginationRef.current)) {
+            setPagination({ page: initialPage, perPage: initialPerPage });
         }
-    }, [setPagination, perPage, pagination]);
+    }, [setPagination, initialPage, initialPerPage]);
 
     // filter logic
     const [queryFilter, setFilter] = useState('');
@@ -236,7 +233,11 @@ const useReferenceArrayInputController = (
     // filter out not found references - happens when the dataProvider doesn't guarantee referential integrity
     const finalReferenceRecords = referenceRecords.filter(Boolean);
 
-    const { data: matchingReferences, total } = useGetMatching(
+    const {
+        data: matchingReferences,
+        ids: matchingReferencesIds,
+        total,
+    } = useGetMatching(
         reference,
         pagination,
         sort,
@@ -262,19 +263,20 @@ const useReferenceArrayInputController = (
         translate,
     });
 
-    let sortedChoices = sortChoices(dataStatus.choices, sort);
-
     return {
         basePath: basePath.replace(resource, reference),
         choices: dataStatus.choices,
         currentSort: sort,
-        data: indexById(dataStatus.choices),
+        data:
+            matchingReferences && matchingReferences.length > 0
+                ? indexById(matchingReferences)
+                : {},
         displayedFilters,
         error: dataStatus.error,
         filterValues,
         hasCreate: false,
         hideFilter,
-        ids: sortedChoices.map(choice => choice.id),
+        ids: matchingReferencesIds || [],
         loaded,
         loading: dataStatus.waiting,
         onSelect,

From cf99a744ccaf88a8cfdbbc454d4bf150de7f1ae1 Mon Sep 17 00:00:00 2001
From: Gildas Garcia <1122076+djhi@users.noreply.github.com>
Date: Tue, 9 Feb 2021 15:51:58 +0100
Subject: [PATCH 05/16] Enable input change through selection

---
 .../input/useReferenceArrayInputController.ts         | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/ra-core/src/controller/input/useReferenceArrayInputController.ts b/packages/ra-core/src/controller/input/useReferenceArrayInputController.ts
index 973cadf3d9b..8757193bf09 100644
--- a/packages/ra-core/src/controller/input/useReferenceArrayInputController.ts
+++ b/packages/ra-core/src/controller/input/useReferenceArrayInputController.ts
@@ -11,7 +11,7 @@ import {
     ReduxState,
 } from '../../types';
 import { useGetMany } from '../../dataProvider';
-import { FieldInputProps } from 'react-final-form';
+import { FieldInputProps, useForm } from 'react-final-form';
 import useGetMatching from '../../dataProvider/useGetMatching';
 import { useTranslate } from '../../i18n';
 import { getStatusForArrayInput as getDataStatus } from './referenceDataStatus';
@@ -132,7 +132,14 @@ const useReferenceArrayInputController = (
         onSelect,
         onToggleItem,
         onUnselectItems,
-    } = useSelectionState();
+    } = useSelectionState(input.value);
+
+    const form = useForm();
+    useEffect(() => {
+        if (!isEqual(input.value, selectedIds)) {
+            form.change(input.name, selectedIds);
+        }
+    }, [input.name, input.value, selectedIds, form]);
 
     // sort logic
     const sortRef = useRef(initialSort);

From ea2ee51883db000a6efc9dec72b23e7eab491150 Mon Sep 17 00:00:00 2001
From: Gildas Garcia <1122076+djhi@users.noreply.github.com>
Date: Tue, 9 Feb 2021 16:03:06 +0100
Subject: [PATCH 06/16] Add comments

---
 .../src/controller/input/useReferenceArrayInputController.ts  | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/ra-core/src/controller/input/useReferenceArrayInputController.ts b/packages/ra-core/src/controller/input/useReferenceArrayInputController.ts
index 8757193bf09..940da464013 100644
--- a/packages/ra-core/src/controller/input/useReferenceArrayInputController.ts
+++ b/packages/ra-core/src/controller/input/useReferenceArrayInputController.ts
@@ -274,6 +274,8 @@ const useReferenceArrayInputController = (
         basePath: basePath.replace(resource, reference),
         choices: dataStatus.choices,
         currentSort: sort,
+        // For the ListContext, we don't want to always display the selected items first.
+        // Indeed it wouldn't work well regarding sorting and pagination
         data:
             matchingReferences && matchingReferences.length > 0
                 ? indexById(matchingReferences)
@@ -283,6 +285,8 @@ const useReferenceArrayInputController = (
         filterValues,
         hasCreate: false,
         hideFilter,
+        // For the ListContext, we don't want to always display the selected items first.
+        // Indeed it wouldn't work well regarding sorting and pagination
         ids: matchingReferencesIds || [],
         loaded,
         loading: dataStatus.waiting,

From b63b683a3a2338a794803144abed3150aee8a3b3 Mon Sep 17 00:00:00 2001
From: Gildas Garcia <1122076+djhi@users.noreply.github.com>
Date: Tue, 9 Feb 2021 16:28:15 +0100
Subject: [PATCH 07/16] Fix selection and tests

---
 .../ReferenceArrayInputController.spec.tsx    | 407 ++++++++++++------
 .../input/useReferenceArrayInputController.ts |  47 +-
 2 files changed, 296 insertions(+), 158 deletions(-)

diff --git a/packages/ra-core/src/controller/input/ReferenceArrayInputController.spec.tsx b/packages/ra-core/src/controller/input/ReferenceArrayInputController.spec.tsx
index 2d4b6fb3623..bd914af6986 100644
--- a/packages/ra-core/src/controller/input/ReferenceArrayInputController.spec.tsx
+++ b/packages/ra-core/src/controller/input/ReferenceArrayInputController.spec.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import expect from 'expect';
 import { waitFor, fireEvent } from '@testing-library/react';
+import { Form } from 'react-final-form';
 import ReferenceArrayInputController from './ReferenceArrayInputController';
 import { renderWithRedux } from 'ra-test';
 import { CRUD_GET_MATCHING, CRUD_GET_MANY } from '../../../lib';
@@ -20,12 +21,17 @@ describe('<ReferenceArrayInputController />', () => {
             <div>{loading.toString()}</div>
         ));
         const { queryByText } = renderWithRedux(
-            <ReferenceArrayInputController
-                {...defaultProps}
-                input={{ value: [1, 2] }}
-            >
-                {children}
-            </ReferenceArrayInputController>,
+            <Form
+                onSubmit={jest.fn()}
+                render={() => (
+                    <ReferenceArrayInputController
+                        {...defaultProps}
+                        input={{ value: [1, 2] }}
+                    >
+                        {children}
+                    </ReferenceArrayInputController>
+                )}
+            />,
             { admin: { resources: { tags: { data: {} } } } }
         );
 
@@ -37,12 +43,17 @@ describe('<ReferenceArrayInputController />', () => {
             <div>{loading.toString()}</div>
         ));
         const { queryByText } = renderWithRedux(
-            <ReferenceArrayInputController
-                {...defaultProps}
-                input={{ value: [1, 2] }}
-            >
-                {children}
-            </ReferenceArrayInputController>,
+            <Form
+                onSubmit={jest.fn()}
+                render={() => (
+                    <ReferenceArrayInputController
+                        {...defaultProps}
+                        input={{ value: [1, 2] }}
+                    >
+                        {children}
+                    </ReferenceArrayInputController>
+                )}
+            />,
             { admin: { resources: { tags: { data: {} } } } }
         );
         expect(queryByText('true')).not.toBeNull();
@@ -53,12 +64,17 @@ describe('<ReferenceArrayInputController />', () => {
             <div>{loading.toString()}</div>
         ));
         const { queryByText } = renderWithRedux(
-            <ReferenceArrayInputController
-                {...defaultProps}
-                input={{ value: [1, 2] }}
-            >
-                {children}
-            </ReferenceArrayInputController>,
+            <Form
+                onSubmit={jest.fn()}
+                render={() => (
+                    <ReferenceArrayInputController
+                        {...defaultProps}
+                        input={{ value: [1, 2] }}
+                    >
+                        {children}
+                    </ReferenceArrayInputController>
+                )}
+            />,
             {
                 admin: {
                     resources: {
@@ -82,9 +98,14 @@ describe('<ReferenceArrayInputController />', () => {
         const children = jest.fn(({ error }) => <div>{error}</div>);
 
         const { queryByText } = renderWithRedux(
-            <ReferenceArrayInputController {...defaultProps}>
-                {children}
-            </ReferenceArrayInputController>,
+            <Form
+                onSubmit={jest.fn()}
+                render={() => (
+                    <ReferenceArrayInputController {...defaultProps}>
+                        {children}
+                    </ReferenceArrayInputController>
+                )}
+            />,
             {
                 admin: {
                     references: {
@@ -102,12 +123,17 @@ describe('<ReferenceArrayInputController />', () => {
     it('should set error in case of references fetch error and there are no data found for the references already selected', () => {
         const children = jest.fn(({ error }) => <div>{error}</div>);
         const { queryByText } = renderWithRedux(
-            <ReferenceArrayInputController
-                {...defaultProps}
-                input={{ value: [1] }}
-            >
-                {children}
-            </ReferenceArrayInputController>,
+            <Form
+                onSubmit={jest.fn()}
+                render={() => (
+                    <ReferenceArrayInputController
+                        {...defaultProps}
+                        input={{ value: [1] }}
+                    >
+                        {children}
+                    </ReferenceArrayInputController>
+                )}
+            />,
             {
                 admin: {
                     resources: { tags: { data: {} } },
@@ -125,12 +151,17 @@ describe('<ReferenceArrayInputController />', () => {
     it('should not display an error in case of references fetch error but data from at least one selected reference was found', () => {
         const children = jest.fn(({ error }) => <div>{error}</div>);
         const { queryByText } = renderWithRedux(
-            <ReferenceArrayInputController
-                {...defaultProps}
-                input={{ value: [1, 2] }}
-            >
-                {children}
-            </ReferenceArrayInputController>,
+            <Form
+                onSubmit={jest.fn()}
+                render={() => (
+                    <ReferenceArrayInputController
+                        {...defaultProps}
+                        input={{ value: [1, 2] }}
+                    >
+                        {children}
+                    </ReferenceArrayInputController>
+                )}
+            />,
             {
                 admin: {
                     resources: {
@@ -159,12 +190,17 @@ describe('<ReferenceArrayInputController />', () => {
     it('should set warning if references fetch fails but selected references are not empty', () => {
         const children = jest.fn(({ warning }) => <div>{warning}</div>);
         const { queryByText } = renderWithRedux(
-            <ReferenceArrayInputController
-                {...defaultProps}
-                input={{ value: [1, 2] }}
-            >
-                {children}
-            </ReferenceArrayInputController>,
+            <Form
+                onSubmit={jest.fn()}
+                render={() => (
+                    <ReferenceArrayInputController
+                        {...defaultProps}
+                        input={{ value: [1, 2] }}
+                    >
+                        {children}
+                    </ReferenceArrayInputController>
+                )}
+            />,
             {
                 admin: {
                     resources: {
@@ -193,12 +229,17 @@ describe('<ReferenceArrayInputController />', () => {
     it('should set warning if references were found but selected references are not complete', () => {
         const children = jest.fn(({ warning }) => <div>{warning}</div>);
         const { queryByText } = renderWithRedux(
-            <ReferenceArrayInputController
-                {...defaultProps}
-                input={{ value: [1, 2] }}
-            >
-                {children}
-            </ReferenceArrayInputController>,
+            <Form
+                onSubmit={jest.fn()}
+                render={() => (
+                    <ReferenceArrayInputController
+                        {...defaultProps}
+                        input={{ value: [1, 2] }}
+                    >
+                        {children}
+                    </ReferenceArrayInputController>
+                )}
+            />,
             {
                 admin: {
                     resources: {
@@ -227,12 +268,17 @@ describe('<ReferenceArrayInputController />', () => {
     it('should set warning if references were found but selected references are empty', () => {
         const children = jest.fn(({ warning }) => <div>{warning}</div>);
         const { queryByText } = renderWithRedux(
-            <ReferenceArrayInputController
-                {...defaultProps}
-                input={{ value: [1, 2] }}
-            >
-                {children}
-            </ReferenceArrayInputController>,
+            <Form
+                onSubmit={jest.fn()}
+                render={() => (
+                    <ReferenceArrayInputController
+                        {...defaultProps}
+                        input={{ value: [1, 2] }}
+                    >
+                        {children}
+                    </ReferenceArrayInputController>
+                )}
+            />,
             {
                 admin: {
                     resources: { tags: { data: { 5: {}, 6: {} } } },
@@ -250,12 +296,17 @@ describe('<ReferenceArrayInputController />', () => {
     it('should not set warning if all references were found', () => {
         const children = jest.fn(({ warning }) => <div>{warning}</div>);
         const { queryByText } = renderWithRedux(
-            <ReferenceArrayInputController
-                {...defaultProps}
-                input={{ value: [1, 2] }}
-            >
-                {children}
-            </ReferenceArrayInputController>,
+            <Form
+                onSubmit={jest.fn()}
+                render={() => (
+                    <ReferenceArrayInputController
+                        {...defaultProps}
+                        input={{ value: [1, 2] }}
+                    >
+                        {children}
+                    </ReferenceArrayInputController>
+                )}
+            />,
             {
                 admin: {
                     resources: {
@@ -288,9 +339,14 @@ describe('<ReferenceArrayInputController />', () => {
         const children = jest.fn(() => <div />);
         await new Promise(resolve => setTimeout(resolve, 100)); // empty the query deduplication in useQueryWithStore
         const { dispatch } = renderWithRedux(
-            <ReferenceArrayInputController {...defaultProps} allowEmpty>
-                {children}
-            </ReferenceArrayInputController>,
+            <Form
+                onSubmit={jest.fn()}
+                render={() => (
+                    <ReferenceArrayInputController {...defaultProps} allowEmpty>
+                        {children}
+                    </ReferenceArrayInputController>
+                )}
+            />,
             { admin: { resources: { tags: { data: {} } } } }
         );
         expect(dispatch.mock.calls[0][0]).toEqual({
@@ -317,14 +373,19 @@ describe('<ReferenceArrayInputController />', () => {
         const children = jest.fn(() => <div />);
 
         const { dispatch } = renderWithRedux(
-            <ReferenceArrayInputController
-                {...defaultProps}
-                sort={{ field: 'foo', order: 'ASC' }}
-                perPage={5}
-                filter={{ permanentFilter: 'foo' }}
-            >
-                {children}
-            </ReferenceArrayInputController>
+            <Form
+                onSubmit={jest.fn()}
+                render={() => (
+                    <ReferenceArrayInputController
+                        {...defaultProps}
+                        sort={{ field: 'foo', order: 'ASC' }}
+                        perPage={5}
+                        filter={{ permanentFilter: 'foo' }}
+                    >
+                        {children}
+                    </ReferenceArrayInputController>
+                )}
+            />
         );
         expect(dispatch.mock.calls[0][0]).toEqual({
             type: CRUD_GET_MATCHING,
@@ -352,9 +413,14 @@ describe('<ReferenceArrayInputController />', () => {
         ));
 
         const { dispatch, getByLabelText } = renderWithRedux(
-            <ReferenceArrayInputController {...defaultProps}>
-                {children}
-            </ReferenceArrayInputController>
+            <Form
+                onSubmit={jest.fn()}
+                render={() => (
+                    <ReferenceArrayInputController {...defaultProps}>
+                        {children}
+                    </ReferenceArrayInputController>
+                )}
+            />
         );
 
         fireEvent.click(getByLabelText('Filter'));
@@ -387,12 +453,17 @@ describe('<ReferenceArrayInputController />', () => {
         ));
 
         const { dispatch, getByLabelText } = renderWithRedux(
-            <ReferenceArrayInputController
-                {...defaultProps}
-                filterToQuery={searchText => ({ foo: searchText })}
-            >
-                {children}
-            </ReferenceArrayInputController>
+            <Form
+                onSubmit={jest.fn()}
+                render={() => (
+                    <ReferenceArrayInputController
+                        {...defaultProps}
+                        filterToQuery={searchText => ({ foo: searchText })}
+                    >
+                        {children}
+                    </ReferenceArrayInputController>
+                )}
+            />
         );
 
         fireEvent.click(getByLabelText('Filter'));
@@ -423,12 +494,17 @@ describe('<ReferenceArrayInputController />', () => {
         const children = jest.fn(() => <div />);
 
         const { dispatch } = renderWithRedux(
-            <ReferenceArrayInputController
-                {...defaultProps}
-                input={{ value: [5, 6] }}
-            >
-                {children}
-            </ReferenceArrayInputController>,
+            <Form
+                onSubmit={jest.fn()}
+                render={() => (
+                    <ReferenceArrayInputController
+                        {...defaultProps}
+                        input={{ value: [5, 6] }}
+                    >
+                        {children}
+                    </ReferenceArrayInputController>
+                )}
+            />,
             { admin: { resources: { tags: { data: { 5: {}, 6: {} } } } } }
         );
         await waitFor(() => {
@@ -448,12 +524,17 @@ describe('<ReferenceArrayInputController />', () => {
         ));
 
         const { dispatch, getByLabelText } = renderWithRedux(
-            <ReferenceArrayInputController
-                {...defaultProps}
-                input={{ value: [5] }}
-            >
-                {children}
-            </ReferenceArrayInputController>,
+            <Form
+                onSubmit={jest.fn()}
+                render={() => (
+                    <ReferenceArrayInputController
+                        {...defaultProps}
+                        input={{ value: [5] }}
+                    >
+                        {children}
+                    </ReferenceArrayInputController>
+                )}
+            />,
             { admin: { resources: { tags: { data: { 5: {} } } } } }
         );
 
@@ -477,23 +558,33 @@ describe('<ReferenceArrayInputController />', () => {
         const children = jest.fn(() => <div />);
 
         const { dispatch, rerender } = renderWithRedux(
-            <ReferenceArrayInputController
-                {...defaultProps}
-                input={{ value: [5] }}
-            >
-                {children}
-            </ReferenceArrayInputController>,
+            <Form
+                onSubmit={jest.fn()}
+                render={() => (
+                    <ReferenceArrayInputController
+                        {...defaultProps}
+                        input={{ value: [5] }}
+                    >
+                        {children}
+                    </ReferenceArrayInputController>
+                )}
+            />,
             { admin: { resources: { tags: { data: { 5: {} } } } } }
         );
 
         rerender(
-            <ReferenceArrayInputController
-                {...defaultProps}
-                input={{ value: [5] }}
-                filter={{ permanentFilter: 'bar' }}
-            >
-                {children}
-            </ReferenceArrayInputController>
+            <Form
+                onSubmit={jest.fn()}
+                render={() => (
+                    <ReferenceArrayInputController
+                        {...defaultProps}
+                        input={{ value: [5] }}
+                        filter={{ permanentFilter: 'bar' }}
+                    >
+                        {children}
+                    </ReferenceArrayInputController>
+                )}
+            />
         );
 
         await waitFor(() => {
@@ -510,14 +601,19 @@ describe('<ReferenceArrayInputController />', () => {
         });
 
         rerender(
-            <ReferenceArrayInputController
-                {...defaultProps}
-                input={{ value: [5] }}
-                filter={{ permanentFilter: 'bar' }}
-                sort={{ field: 'foo', order: 'ASC' }}
-            >
-                {children}
-            </ReferenceArrayInputController>
+            <Form
+                onSubmit={jest.fn()}
+                render={() => (
+                    <ReferenceArrayInputController
+                        {...defaultProps}
+                        input={{ value: [5] }}
+                        filter={{ permanentFilter: 'bar' }}
+                        sort={{ field: 'foo', order: 'ASC' }}
+                    >
+                        {children}
+                    </ReferenceArrayInputController>
+                )}
+            />
         );
 
         await waitFor(() => {
@@ -534,15 +630,20 @@ describe('<ReferenceArrayInputController />', () => {
         });
 
         rerender(
-            <ReferenceArrayInputController
-                {...defaultProps}
-                input={{ value: [5] }}
-                filter={{ permanentFilter: 'bar' }}
-                sort={{ field: 'foo', order: 'ASC' }}
-                perPage={42}
-            >
-                {children}
-            </ReferenceArrayInputController>
+            <Form
+                onSubmit={jest.fn()}
+                render={() => (
+                    <ReferenceArrayInputController
+                        {...defaultProps}
+                        input={{ value: [5] }}
+                        filter={{ permanentFilter: 'bar' }}
+                        sort={{ field: 'foo', order: 'ASC' }}
+                        perPage={42}
+                    >
+                        {children}
+                    </ReferenceArrayInputController>
+                )}
+            />
         );
 
         await waitFor(() => {
@@ -563,12 +664,17 @@ describe('<ReferenceArrayInputController />', () => {
         const children = jest.fn(() => <div />);
 
         const { dispatch, rerender } = renderWithRedux(
-            <ReferenceArrayInputController
-                {...defaultProps}
-                input={{ value: [5] }}
-            >
-                {children}
-            </ReferenceArrayInputController>,
+            <Form
+                onSubmit={jest.fn()}
+                render={() => (
+                    <ReferenceArrayInputController
+                        {...defaultProps}
+                        input={{ value: [5] }}
+                    >
+                        {children}
+                    </ReferenceArrayInputController>
+                )}
+            />,
             {
                 admin: {
                     resources: {
@@ -593,12 +699,17 @@ describe('<ReferenceArrayInputController />', () => {
             });
         });
         rerender(
-            <ReferenceArrayInputController
-                {...defaultProps}
-                input={{ value: [5, 6] }}
-            >
-                {children}
-            </ReferenceArrayInputController>
+            <Form
+                onSubmit={jest.fn()}
+                render={() => (
+                    <ReferenceArrayInputController
+                        {...defaultProps}
+                        input={{ value: [5, 6] }}
+                    >
+                        {children}
+                    </ReferenceArrayInputController>
+                )}
+            />
         );
 
         await waitFor(() => {
@@ -616,12 +727,17 @@ describe('<ReferenceArrayInputController />', () => {
         const children = jest.fn(() => <div />);
 
         const { dispatch, rerender } = renderWithRedux(
-            <ReferenceArrayInputController
-                {...defaultProps}
-                input={{ value: [5, 6] }}
-            >
-                {children}
-            </ReferenceArrayInputController>,
+            <Form
+                onSubmit={jest.fn()}
+                render={() => (
+                    <ReferenceArrayInputController
+                        {...defaultProps}
+                        input={{ value: [5, 6] }}
+                    >
+                        {children}
+                    </ReferenceArrayInputController>
+                )}
+            />,
             { admin: { resources: { tags: { data: { 5: {}, 6: {} } } } } }
         );
         await waitFor(() => {
@@ -634,12 +750,17 @@ describe('<ReferenceArrayInputController />', () => {
             });
         });
         rerender(
-            <ReferenceArrayInputController
-                {...defaultProps}
-                input={{ value: [5, 6] }}
-            >
-                {children}
-            </ReferenceArrayInputController>
+            <Form
+                onSubmit={jest.fn()}
+                render={() => (
+                    <ReferenceArrayInputController
+                        {...defaultProps}
+                        input={{ value: [5, 6] }}
+                    >
+                        {children}
+                    </ReferenceArrayInputController>
+                )}
+            />
         );
 
         await waitFor(() => {
diff --git a/packages/ra-core/src/controller/input/useReferenceArrayInputController.ts b/packages/ra-core/src/controller/input/useReferenceArrayInputController.ts
index 940da464013..15185401d8b 100644
--- a/packages/ra-core/src/controller/input/useReferenceArrayInputController.ts
+++ b/packages/ra-core/src/controller/input/useReferenceArrayInputController.ts
@@ -9,6 +9,7 @@ import {
     Record,
     SortPayload,
     ReduxState,
+    Identifier,
 } from '../../types';
 import { useGetMany } from '../../dataProvider';
 import { FieldInputProps, useForm } from 'react-final-form';
@@ -16,7 +17,7 @@ import useGetMatching from '../../dataProvider/useGetMatching';
 import { useTranslate } from '../../i18n';
 import { getStatusForArrayInput as getDataStatus } from './referenceDataStatus';
 import { useResourceContext } from '../../core';
-import { usePaginationState, useSelectionState, useSortState } from '..';
+import { usePaginationState, useSortState } from '..';
 import { ListControllerProps } from '../useListController';
 import { indexById, removeEmpty, useSafeSetState } from '../../util';
 import { SORT_DESC } from '../../reducer/admin/resource/list/queryReducer';
@@ -126,20 +127,36 @@ const useReferenceArrayInputController = (
         perPage: initialPerPage,
     });
 
-    // selection logic
-    const {
-        selectedIds,
-        onSelect,
-        onToggleItem,
-        onUnselectItems,
-    } = useSelectionState(input.value);
-
     const form = useForm();
-    useEffect(() => {
-        if (!isEqual(input.value, selectedIds)) {
-            form.change(input.name, selectedIds);
-        }
-    }, [input.name, input.value, selectedIds, form]);
+    const onSelect = useCallback(
+        (newIds: Identifier[]) => {
+            const newValue = new Set(input.value);
+            newIds.forEach(newId => {
+                newValue.add(newId);
+            });
+
+            form.change(input.name, Array.from(newValue));
+        },
+        [form, input.name, input.value]
+    );
+
+    const onUnselectItems = useCallback(() => {
+        form.change(input.name, []);
+    }, [form, input.name]);
+
+    const onToggleItem = useCallback(
+        (id: Identifier) => {
+            if (input.value.contains(id)) {
+                form.change(
+                    input.name,
+                    input.value.filter(selectedId => selectedId !== id)
+                );
+            } else {
+                form.change(input.name, [...input.value, id]);
+            }
+        },
+        [form, input.name, input.value]
+    );
 
     // sort logic
     const sortRef = useRef(initialSort);
@@ -296,7 +313,7 @@ const useReferenceArrayInputController = (
         page,
         perPage,
         resource,
-        selectedIds,
+        selectedIds: input.value,
         setFilter,
         setFilters,
         setPage,

From f082036e2a7b6cec431a90822f48a8bccddcf21f Mon Sep 17 00:00:00 2001
From: Gildas Garcia <1122076+djhi@users.noreply.github.com>
Date: Tue, 9 Feb 2021 16:54:18 +0100
Subject: [PATCH 08/16] Fix selection

---
 .../src/controller/input/useReferenceArrayInputController.ts    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ra-core/src/controller/input/useReferenceArrayInputController.ts b/packages/ra-core/src/controller/input/useReferenceArrayInputController.ts
index 15185401d8b..d99e1da86dc 100644
--- a/packages/ra-core/src/controller/input/useReferenceArrayInputController.ts
+++ b/packages/ra-core/src/controller/input/useReferenceArrayInputController.ts
@@ -146,7 +146,7 @@ const useReferenceArrayInputController = (
 
     const onToggleItem = useCallback(
         (id: Identifier) => {
-            if (input.value.contains(id)) {
+            if (input.value.some(selectedId => selectedId === id)) {
                 form.change(
                     input.name,
                     input.value.filter(selectedId => selectedId !== id)

From 94fbce413f6352490b7688517032ef0fed06fc24 Mon Sep 17 00:00:00 2001
From: Gildas Garcia <1122076+djhi@users.noreply.github.com>
Date: Thu, 11 Feb 2021 15:18:27 +0100
Subject: [PATCH 09/16] Cleanup unused code

---
 .../input/useReferenceArrayInputController.ts       | 13 -------------
 1 file changed, 13 deletions(-)

diff --git a/packages/ra-core/src/controller/input/useReferenceArrayInputController.ts b/packages/ra-core/src/controller/input/useReferenceArrayInputController.ts
index d99e1da86dc..04e62a8ca48 100644
--- a/packages/ra-core/src/controller/input/useReferenceArrayInputController.ts
+++ b/packages/ra-core/src/controller/input/useReferenceArrayInputController.ts
@@ -327,19 +327,6 @@ const useReferenceArrayInputController = (
     };
 };
 
-const sortChoices = (choices: Record[], sort: SortPayload) => {
-    let sortedChoices = sortBy(
-        choices.filter(choice => typeof choice !== 'undefined'),
-        choice => get(choice, sort.field)
-    );
-
-    if (sort.order === SORT_DESC) {
-        return sortedChoices.reverse();
-    }
-
-    return sortedChoices;
-};
-
 // concatenate and deduplicate two lists of records
 const mergeReferences = (ref1: Record[], ref2: Record[]): Record[] => {
     const res = [...ref1];

From 729309ab38087c29042b945fea510cbddefb6156 Mon Sep 17 00:00:00 2001
From: Gildas Garcia <1122076+djhi@users.noreply.github.com>
Date: Thu, 11 Feb 2021 15:18:47 +0100
Subject: [PATCH 10/16] Export Child Function Interface

---
 .../controller/input/ReferenceArrayInputController.tsx   | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/ra-core/src/controller/input/ReferenceArrayInputController.tsx b/packages/ra-core/src/controller/input/ReferenceArrayInputController.tsx
index c30ff7b5f82..2474beb1f1c 100644
--- a/packages/ra-core/src/controller/input/ReferenceArrayInputController.tsx
+++ b/packages/ra-core/src/controller/input/ReferenceArrayInputController.tsx
@@ -3,6 +3,7 @@ import debounce from 'lodash/debounce';
 
 import { Record, SortPayload, PaginationPayload } from '../../types';
 import useReferenceArrayInputController from './useReferenceArrayInputController';
+import { ListControllerProps } from '..';
 
 /**
  * An Input component for fields containing a list of references to another resource.
@@ -117,7 +118,8 @@ const ReferenceArrayInputController = ({
     });
 };
 
-interface ChildrenFuncParams {
+export interface ReferenceArrayInputControllerChildrenFuncParams
+    extends Omit<ListControllerProps, 'setSort'> {
     choices: Record[];
     error?: string;
     loaded: boolean;
@@ -125,13 +127,16 @@ interface ChildrenFuncParams {
     setFilter: (filter: any) => void;
     setPagination: (pagination: PaginationPayload) => void;
     setSort: (sort: SortPayload) => void;
+    setSortForList: (sort: string, order?: string) => void;
     warning?: string;
 }
 
 interface ReferenceArrayInputControllerProps {
     allowEmpty?: boolean;
     basePath: string;
-    children: (params: ChildrenFuncParams) => ReactElement;
+    children: (
+        params: ReferenceArrayInputControllerChildrenFuncParams
+    ) => ReactElement;
     filter?: object;
     filterToQuery?: (filter: {}) => any;
     input?: any;

From 1991de73d7b9f8bf8137745595cebf18fe49cbed Mon Sep 17 00:00:00 2001
From: Gildas Garcia <1122076+djhi@users.noreply.github.com>
Date: Thu, 11 Feb 2021 15:18:55 +0100
Subject: [PATCH 11/16] Add tests

---
 .../ReferenceArrayInputController.spec.tsx    | 115 +++++++++++++++++-
 .../src/input/ReferenceArrayInput.spec.js     |  67 +++++++++-
 2 files changed, 180 insertions(+), 2 deletions(-)

diff --git a/packages/ra-core/src/controller/input/ReferenceArrayInputController.spec.tsx b/packages/ra-core/src/controller/input/ReferenceArrayInputController.spec.tsx
index bd914af6986..47491d613ef 100644
--- a/packages/ra-core/src/controller/input/ReferenceArrayInputController.spec.tsx
+++ b/packages/ra-core/src/controller/input/ReferenceArrayInputController.spec.tsx
@@ -2,9 +2,12 @@ import * as React from 'react';
 import expect from 'expect';
 import { waitFor, fireEvent } from '@testing-library/react';
 import { Form } from 'react-final-form';
-import ReferenceArrayInputController from './ReferenceArrayInputController';
 import { renderWithRedux } from 'ra-test';
+import ReferenceArrayInputController, {
+    ReferenceArrayInputControllerChildrenFuncParams,
+} from './ReferenceArrayInputController';
 import { CRUD_GET_MATCHING, CRUD_GET_MANY } from '../../../lib';
+import { SORT_ASC } from '../../reducer/admin/resource/list/queryReducer';
 
 describe('<ReferenceArrayInputController />', () => {
     const defaultProps = {
@@ -771,4 +774,114 @@ describe('<ReferenceArrayInputController />', () => {
             ).toEqual(1);
         });
     });
+
+    it('should props compatible with the ListContext', async () => {
+        const children = ({
+            setPage,
+            setPerPage,
+            setSortForList,
+        }: ReferenceArrayInputControllerChildrenFuncParams): React.ReactElement => {
+            const handleSetPage = () => {
+                setPage(2);
+            };
+            const handleSetPerPage = () => {
+                setPerPage(50);
+            };
+            const handleSetSort = () => {
+                setSortForList('name', SORT_ASC);
+            };
+
+            return (
+                <>
+                    <button aria-label="setPage" onClick={handleSetPage} />
+                    <button
+                        aria-label="setPerPage"
+                        onClick={handleSetPerPage}
+                    />
+                    <button aria-label="setSort" onClick={handleSetSort} />
+                </>
+            );
+        };
+
+        const { getByLabelText, dispatch } = renderWithRedux(
+            <Form
+                onSubmit={jest.fn()}
+                render={() => (
+                    <ReferenceArrayInputController
+                        {...defaultProps}
+                        input={{ value: [5, 6] }}
+                    >
+                        {children}
+                    </ReferenceArrayInputController>
+                )}
+            />,
+            { admin: { resources: { tags: { data: { 5: {}, 6: {} } } } } }
+        );
+
+        fireEvent.click(getByLabelText('setPage'));
+        await waitFor(() => {
+            expect(dispatch).toHaveBeenCalledWith({
+                type: CRUD_GET_MATCHING,
+                meta: {
+                    relatedTo: 'posts@tag_ids',
+                    resource: 'tags',
+                },
+                payload: {
+                    pagination: {
+                        page: 2,
+                        perPage: 25,
+                    },
+                    sort: {
+                        field: 'id',
+                        order: 'DESC',
+                    },
+                    filter: { q: '' },
+                },
+            });
+        });
+
+        fireEvent.click(getByLabelText('setPerPage'));
+        await waitFor(() => {
+            expect(dispatch).toHaveBeenCalledWith({
+                type: CRUD_GET_MATCHING,
+                meta: {
+                    relatedTo: 'posts@tag_ids',
+                    resource: 'tags',
+                },
+                payload: {
+                    pagination: {
+                        page: 2,
+                        perPage: 50,
+                    },
+                    sort: {
+                        field: 'id',
+                        order: 'DESC',
+                    },
+                    filter: { q: '' },
+                },
+            });
+        });
+
+        fireEvent.click(getByLabelText('setSort'));
+        await waitFor(() => {
+            expect(dispatch).toHaveBeenCalledWith({
+                type: CRUD_GET_MATCHING,
+                meta: {
+                    relatedTo: 'posts@tag_ids',
+                    resource: 'tags',
+                },
+                payload: {
+                    pagination: {
+                        page: 1,
+                        perPage: 50,
+                    },
+                    sort: {
+                        field: 'name',
+                        order: 'ASC',
+                    },
+                    filter: { q: '' },
+                },
+            });
+        });
+    });
 });
diff --git a/packages/ra-ui-materialui/src/input/ReferenceArrayInput.spec.js b/packages/ra-ui-materialui/src/input/ReferenceArrayInput.spec.js
index d82909eedf6..22efa1b5c95 100644
--- a/packages/ra-ui-materialui/src/input/ReferenceArrayInput.spec.js
+++ b/packages/ra-ui-materialui/src/input/ReferenceArrayInput.spec.js
@@ -1,6 +1,11 @@
 import * as React from 'react';
 import { render } from '@testing-library/react';
-import { ReferenceArrayInputView } from './ReferenceArrayInput';
+import ReferenceArrayInput, {
+    ReferenceArrayInputView,
+} from './ReferenceArrayInput';
+import { Form } from 'react-final-form';
+import { useListContext } from 'ra-core';
+import { renderWithRedux } from 'ra-test';
 
 describe('<ReferenceArrayInput />', () => {
     const defaultProps = {
@@ -10,6 +15,7 @@ describe('<ReferenceArrayInput />', () => {
         reference: 'tags',
         resource: 'posts',
         source: 'tag_ids',
+        basePath: '/posts',
         translate: x => `*${x}*`,
     };
 
@@ -140,4 +146,63 @@ describe('<ReferenceArrayInput />', () => {
             queryByText(JSON.stringify({ touched: false, helperText: false }))
         ).not.toBeNull();
     });
+
+    it('should provide a ListContext with all available choices', async () => {
+        const Children = () => {
+            const listContext = useListContext();
+
+            return (
+                <>
+                    <div aria-label="total">{listContext.total}</div>
+                    <div aria-label="ids">{listContext.ids.join()}</div>
+                    <div aria-label="data">
+                        {JSON.stringify(listContext.data)}
+                    </div>
+                </>
+            );
+        };
+
+        const { getByLabelText } = renderWithRedux(
+            <Form
+                onSubmit={jest.fn()}
+                render={() => (
+                    <ReferenceArrayInput {...defaultProps}>
+                        <Children />
+                    </ReferenceArrayInput>
+                )}
+            />,
+            {
+                admin: {
+                    references: {
+                        possibleValues: {
+                            'posts@tag_ids': [5, 6],
+                        },
+                    },
+                    resources: {
+                        tags: {
+                            list: {
+                                cachedRequests: {
+                                    [JSON.stringify({
+                                        pagination: { page: 1, perPage: 25 },
+                                        sort: {
+                                            field: 'id',
+                                            order: 'DESC',
+                                        },
+                                        filter: {},
+                                    })]: {
+                                        total: 2,
+                                    },
+                                },
+                            },
+                            data: {
+                                5: { id: 5, name: 'test1' },
+                                6: { id: 6, name: 'test2' },
+                            },
+                        },
+                    },
+                },
+            }
+        );
+        expect(getByLabelText('total').innerHTML).toEqual('2');
+    });
 });

From 9ed6d01bae2bd9809bc164798bd4e419716493a9 Mon Sep 17 00:00:00 2001
From: Gildas Garcia <1122076+djhi@users.noreply.github.com>
Date: Thu, 11 Feb 2021 18:20:46 +0100
Subject: [PATCH 12/16] Introduce ReferenceArrayInputContext

---
 .../input/ReferenceArrayInputContext.ts       | 29 +++++++++++++
 .../ReferenceArrayInputContextProvider.tsx    | 31 +++++++++++++
 .../input/ReferenceArrayInputController.tsx   |  2 +-
 .../ra-core/src/controller/input/index.ts     |  6 ++-
 .../input/useReferenceArrayInputContext.ts    | 22 ++++++++++
 .../input/useReferenceArrayInputController.ts | 43 +++----------------
 .../src/input/ReferenceArrayInput.tsx         | 38 ++++++++--------
 7 files changed, 111 insertions(+), 60 deletions(-)
 create mode 100644 packages/ra-core/src/controller/input/ReferenceArrayInputContext.ts
 create mode 100644 packages/ra-core/src/controller/input/ReferenceArrayInputContextProvider.tsx
 create mode 100644 packages/ra-core/src/controller/input/useReferenceArrayInputContext.ts

diff --git a/packages/ra-core/src/controller/input/ReferenceArrayInputContext.ts b/packages/ra-core/src/controller/input/ReferenceArrayInputContext.ts
new file mode 100644
index 00000000000..c9fd7d80f5d
--- /dev/null
+++ b/packages/ra-core/src/controller/input/ReferenceArrayInputContext.ts
@@ -0,0 +1,29 @@
+import { createContext } from 'react';
+import { PaginationPayload, Record, SortPayload } from '../../types';
+
+/**
+ * Context which provides access to the useReferenceArrayInput features.
+ *
+ * @example
+ * const ReferenceArrayInput = ({ children }) => {
+ *     const controllerProps = useReferenceArrayInputController();
+ *     return (
+ *         <ReferenceArrayInputContextProvider value={controllerProps}>
+ *             {children}
+ *         </ReferenceArrayInputContextProvider>
+ *     )
+ * }
+ */
+export const ReferenceArrayInputContext = createContext(undefined);
+
+export interface ReferenceArrayInputContextValue {
+    choices: Record[];
+    error?: any;
+    warning?: any;
+    loading: boolean;
+    loaded: boolean;
+    setFilter: (filter: any) => void;
+    setPagination: (pagination: PaginationPayload) => void;
+    setSort: (sort: SortPayload) => void;
+    setSortForList: (sort: string, order?: string) => void;
+}
diff --git a/packages/ra-core/src/controller/input/ReferenceArrayInputContextProvider.tsx b/packages/ra-core/src/controller/input/ReferenceArrayInputContextProvider.tsx
new file mode 100644
index 00000000000..d3229d65ee1
--- /dev/null
+++ b/packages/ra-core/src/controller/input/ReferenceArrayInputContextProvider.tsx
@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+import {
+    ReferenceArrayInputContext,
+    ReferenceArrayInputContextValue,
+} from './ReferenceArrayInputContext';
+
+/**
+ * Provider for the context which provides access to the useReferenceArrayInput features.
+ *
+ * @example
+ * const ReferenceArrayInput = ({ children }) => {
+ *     const controllerProps = useReferenceArrayInputController();
+ *     return (
+ *         <ReferenceArrayInputContextProvider value={controllerProps}>
+ *             {children}
+ *         </ReferenceArrayInputContextProvider>
+ *     )
+ * }
+ */
+export const ReferenceArrayInputContextProvider = ({
+    children,
+    value,
+}: {
+    children: ReactNode;
+    value: ReferenceArrayInputContextValue;
+}) => (
+    <ReferenceArrayInputContext.Provider value={value}>
+        {children}
+    </ReferenceArrayInputContext.Provider>
+);
diff --git a/packages/ra-core/src/controller/input/ReferenceArrayInputController.tsx b/packages/ra-core/src/controller/input/ReferenceArrayInputController.tsx
index 2474beb1f1c..9c1277fce77 100644
--- a/packages/ra-core/src/controller/input/ReferenceArrayInputController.tsx
+++ b/packages/ra-core/src/controller/input/ReferenceArrayInputController.tsx
@@ -2,7 +2,7 @@ import { ComponentType, ReactElement, useCallback } from 'react';
 import debounce from 'lodash/debounce';
 
 import { Record, SortPayload, PaginationPayload } from '../../types';
-import useReferenceArrayInputController from './useReferenceArrayInputController';
+import { useReferenceArrayInputController } from './useReferenceArrayInputController';
 import { ListControllerProps } from '..';
 
 /**
diff --git a/packages/ra-core/src/controller/input/index.ts b/packages/ra-core/src/controller/input/index.ts
index 8c91cca93e6..26a1c9701ad 100644
--- a/packages/ra-core/src/controller/input/index.ts
+++ b/packages/ra-core/src/controller/input/index.ts
@@ -1,13 +1,16 @@
 import ReferenceArrayInputController from './ReferenceArrayInputController';
 import ReferenceInputController from './ReferenceInputController';
-import useReferenceArrayInputController from './useReferenceArrayInputController';
 import {
     getStatusForInput,
     getSelectedReferencesStatus,
     getStatusForArrayInput,
 } from './referenceDataStatus';
 
+export * from './useReferenceArrayInputController';
 export * from './useReferenceInputController';
+export * from './ReferenceArrayInputContext';
+export * from './ReferenceArrayInputContextProvider';
+export * from './useReferenceArrayInputContext';
 
 export {
     getStatusForInput,
@@ -15,5 +18,4 @@ export {
     getStatusForArrayInput,
     ReferenceArrayInputController,
     ReferenceInputController,
-    useReferenceArrayInputController,
 };
diff --git a/packages/ra-core/src/controller/input/useReferenceArrayInputContext.ts b/packages/ra-core/src/controller/input/useReferenceArrayInputContext.ts
new file mode 100644
index 00000000000..b6a34059721
--- /dev/null
+++ b/packages/ra-core/src/controller/input/useReferenceArrayInputContext.ts
@@ -0,0 +1,22 @@
+import { useContext } from 'react';
+import {
+    ReferenceArrayInputContext,
+    ReferenceArrayInputContextValue,
+} from './ReferenceArrayInputContext';
+
+/**
+ * Hook to get the ReferenceArrayInputContext.
+ */
+export const useReferenceArrayInputContext = <
+    T extends ReferenceArrayInputContextValue = ReferenceArrayInputContextValue
+>(
+    props: T
+): ReferenceArrayInputContextValue => {
+    const context = useContext(ReferenceArrayInputContext);
+
+    if (props.choices) {
+        return props;
+    }
+
+    return context;
+};
diff --git a/packages/ra-core/src/controller/input/useReferenceArrayInputController.ts b/packages/ra-core/src/controller/input/useReferenceArrayInputController.ts
index 04e62a8ca48..dbcbbe98a83 100644
--- a/packages/ra-core/src/controller/input/useReferenceArrayInputController.ts
+++ b/packages/ra-core/src/controller/input/useReferenceArrayInputController.ts
@@ -1,16 +1,8 @@
 import { useMemo, useState, useEffect, useRef, useCallback } from 'react';
 import { useSelector } from 'react-redux';
 import isEqual from 'lodash/isEqual';
-import get from 'lodash/get';
-import sortBy from 'lodash/sortBy';
 import difference from 'lodash/difference';
-import {
-    PaginationPayload,
-    Record,
-    SortPayload,
-    ReduxState,
-    Identifier,
-} from '../../types';
+import { Record, SortPayload, ReduxState, Identifier } from '../../types';
 import { useGetMany } from '../../dataProvider';
 import { FieldInputProps, useForm } from 'react-final-form';
 import useGetMatching from '../../dataProvider/useGetMatching';
@@ -20,7 +12,7 @@ import { useResourceContext } from '../../core';
 import { usePaginationState, useSortState } from '..';
 import { ListControllerProps } from '../useListController';
 import { indexById, removeEmpty, useSafeSetState } from '../../util';
-import { SORT_DESC } from '../../reducer/admin/resource/list/queryReducer';
+import { ReferenceArrayInputContextValue } from './ReferenceArrayInputContext';
 
 /**
  * Prepare data for the ReferenceArrayInput components
@@ -46,9 +38,9 @@ import { SORT_DESC } from '../../reducer/admin/resource/list/queryReducer';
  *
  * @return {Object} controllerProps Fetched data and callbacks for the ReferenceArrayInput components
  */
-const useReferenceArrayInputController = (
-    props: Option
-): ReferenceArrayInputProps & Omit<ListControllerProps, 'setSort'> => {
+export const useReferenceArrayInputController = (
+    props: UseReferenceArrayInputOptions
+): ReferenceArrayInputContextValue & Omit<ListControllerProps, 'setSort'> => {
     const {
         basePath,
         filter: defaultFilter,
@@ -340,30 +332,7 @@ const mergeReferences = (ref1: Record[], ref2: Record[]): Record[] => {
     return res;
 };
 
-export default useReferenceArrayInputController;
-
-/**
- * @typedef ReferenceArrayProps
- * @type {Object}
- * @property {Array} ids the list of ids.
- * @property {Object} data Object holding the reference data by their ids
- * @property {Object} error the error returned by the dataProvider
- * @property {boolean} loading is the reference currently loading
- * @property {boolean} loaded has the reference already been loaded
- */
-interface ReferenceArrayInputProps {
-    choices: Record[];
-    error?: any;
-    warning?: any;
-    loading: boolean;
-    loaded: boolean;
-    setFilter: (filter: any) => void;
-    setPagination: (pagination: PaginationPayload) => void;
-    setSort: (sort: SortPayload) => void;
-    setSortForList: (sort: string, order?: string) => void;
-}
-
-interface Option {
+export interface UseReferenceArrayInputOptions {
     basePath?: string;
     filter?: any;
     filterToQuery?: (filter: any) => any;
diff --git a/packages/ra-ui-materialui/src/input/ReferenceArrayInput.tsx b/packages/ra-ui-materialui/src/input/ReferenceArrayInput.tsx
index 311a0d34e5f..aea6983ffb2 100644
--- a/packages/ra-ui-materialui/src/input/ReferenceArrayInput.tsx
+++ b/packages/ra-ui-materialui/src/input/ReferenceArrayInput.tsx
@@ -11,6 +11,7 @@ import {
     PaginationPayload,
     Translate,
     ResourceContextProvider,
+    ReferenceArrayInputContextProvider,
     ListContextProvider,
 } from 'ra-core';
 
@@ -137,11 +138,7 @@ const ReferenceArrayInput = ({
         ...props,
     });
 
-    const {
-        setSort,
-        setSortForList,
-        ...controllerProps
-    } = useReferenceArrayInputController({
+    const controllerProps = useReferenceArrayInputController({
         ...props,
         input,
     });
@@ -149,28 +146,29 @@ const ReferenceArrayInput = ({
     const listContext = useMemo(
         () => ({
             ...controllerProps,
-            setSort: setSortForList,
+            setSort: controllerProps.setSortForList,
         }),
-        [controllerProps, setSortForList]
+        [controllerProps]
     );
 
     const translate = useTranslate();
 
     return (
         <ResourceContextProvider value={props.reference}>
-            <ListContextProvider value={listContext}>
-                <ReferenceArrayInputView
-                    id={id}
-                    input={input}
-                    isRequired={isRequired}
-                    meta={meta}
-                    translate={translate}
-                    children={children}
-                    setSort={setSort}
-                    {...props}
-                    {...controllerProps}
-                />
-            </ListContextProvider>
+            <ReferenceArrayInputContextProvider value={controllerProps}>
+                <ListContextProvider value={listContext}>
+                    <ReferenceArrayInputView
+                        id={id}
+                        input={input}
+                        isRequired={isRequired}
+                        meta={meta}
+                        translate={translate}
+                        children={children}
+                        {...props}
+                        {...controllerProps}
+                    />
+                </ListContextProvider>
+            </ReferenceArrayInputContextProvider>
         </ResourceContextProvider>
     );
 };

From 8382e1452fd863efd28ac4b6191db467fd1f47dd Mon Sep 17 00:00:00 2001
From: Gildas Garcia <1122076+djhi@users.noreply.github.com>
Date: Fri, 12 Feb 2021 10:52:26 +0100
Subject: [PATCH 13/16] Documentation

---
 docs/Inputs.md | 25 ++++++++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/docs/Inputs.md b/docs/Inputs.md
index f90bf7720f9..85f924225a8 100644
--- a/docs/Inputs.md
+++ b/docs/Inputs.md
@@ -1406,7 +1406,7 @@ http://myapi.com/tags?id=[1,23,4]
 http://myapi.com/tags?page=1&perPage=25
 ```
 
-Once it receives the deduplicated reference resources, this component delegates rendering to a subcomponent, to which it passes the possible choices as the `choices` attribute.
+Once it receives the deduplicated reference resources, this component delegates rendering to a subcomponent, by providing the possible choices through the `ReferenceArrayInputContext`. This context value can be accessed with the [`useReferenceArrayInputContext`](#usereferencearrayinputcontext) hook.
 
 This means you can use `<ReferenceArrayInput>` with [`<SelectArrayInput>`](#selectarrayinput), or with the component of your choice, provided it supports the `choices` attribute.
 
@@ -1477,8 +1477,31 @@ You can tweak how this component fetches the possible values using the `perPage`
 ```
 {% endraw %}
 
+In addition to the `ReferenceArrayInputContext`, the `<ReferenceArrayInput>` also set up a `ListContext` providing access to the records from the reference resource in a similar fashion as of the `<List>` component. This `ListContext` value is accessible with the [`useListContext`](/List.md#uselistcontext) hook.
+
 `<ReferenceArrayInput>` also accepts the [common input props](./Inputs.md#common-input-props).
 
+### `useReferenceArrayInputContext`
+
+The [`<ReferenceArrayInput>`](#referencearrayinput) component take care of fetching the data, and put that data in a context called `ReferenceArrayInputContext` so that it’s available for its descendants. This context also stores filters, pagination, sort state, and provides callbacks to update them.
+
+Any component can grab information from the `ReferenceArrayInputContext` using the `useReferenceArrayInputContext` hook. Here is what it returns:
+
+```js
+const {
+    choices, // An array of records mathcing both the current input value and the filters
+    error, // A potential error which may have occured while fetching the data
+    warning, // A potential warning regarding missing references 
+    loaded, // boolean that is false until the data is available
+    loading, // boolean that is true on mount, and false once the data was fetched
+    setFilter, // a callback to update the filters, e.g. setFilters({ q: 'query' })
+    setPagination, // a callback to change the pagination, e.g. setPagination({ page: 2, perPage: 50 })
+    setSort, // a callback to change the sort, e.g. setSort({ field: 'name', order: 'DESC' })
+    
+    setSortForList, // // a callback to set the sort with the same signature as the one from the ListContext. This is required to not break backward compatibility and will be removed in v4.
+}
+```
+
 ### `<ReferenceInput>`
 
 Use `<ReferenceInput>` for foreign-key values, for instance, to edit the `post_id` of a `comment` resource. This component fetches the related record (using `dataProvider.getMany()`) as well as possible choices (using `dataProvider.getList()` in the reference resource), then delegates rendering to a subcomponent, to which it passes the possible choices as the `choices` attribute.

From ac1c7e6384f56e27ca0aecf8db0e9d737d5d82a1 Mon Sep 17 00:00:00 2001
From: Francois Zaninotto <francois@marmelab.com>
Date: Mon, 22 Feb 2021 11:40:41 +0100
Subject: [PATCH 14/16] Fix typo

---
 docs/Inputs.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/Inputs.md b/docs/Inputs.md
index 85f924225a8..63e0f753bcd 100644
--- a/docs/Inputs.md
+++ b/docs/Inputs.md
@@ -1477,7 +1477,7 @@ You can tweak how this component fetches the possible values using the `perPage`
 ```
 {% endraw %}
 
-In addition to the `ReferenceArrayInputContext`, the `<ReferenceArrayInput>` also set up a `ListContext` providing access to the records from the reference resource in a similar fashion as of the `<List>` component. This `ListContext` value is accessible with the [`useListContext`](/List.md#uselistcontext) hook.
+In addition to the `ReferenceArrayInputContext`, `<ReferenceArrayInput>` also sets up a `ListContext` providing access to the records from the reference resource in a similar fashion to that of the `<List>` component. This `ListContext` value is accessible with the [`useListContext`](/List.md#uselistcontext) hook.
 
 `<ReferenceArrayInput>` also accepts the [common input props](./Inputs.md#common-input-props).
 

From d9a1c44bc907b3e9e953ccf3ce76450fdda480fa Mon Sep 17 00:00:00 2001
From: Francois Zaninotto <francois@marmelab.com>
Date: Mon, 22 Feb 2021 11:42:59 +0100
Subject: [PATCH 15/16] fix typos

---
 docs/Inputs.md | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/docs/Inputs.md b/docs/Inputs.md
index 63e0f753bcd..e9b620929e2 100644
--- a/docs/Inputs.md
+++ b/docs/Inputs.md
@@ -1485,21 +1485,20 @@ In addition to the `ReferenceArrayInputContext`, `<ReferenceArrayInput>` also se
 
 The [`<ReferenceArrayInput>`](#referencearrayinput) component take care of fetching the data, and put that data in a context called `ReferenceArrayInputContext` so that it’s available for its descendants. This context also stores filters, pagination, sort state, and provides callbacks to update them.
 
-Any component can grab information from the `ReferenceArrayInputContext` using the `useReferenceArrayInputContext` hook. Here is what it returns:
+Any component decendent of `<ReferenceArryInput>` can grab information from the `ReferenceArrayInputContext` using the `useReferenceArrayInputContext` hook. Here is what it returns:
 
 ```js
 const {
-    choices, // An array of records mathcing both the current input value and the filters
-    error, // A potential error which may have occured while fetching the data
+    choices, // An array of records matching both the current input value and the filters
+    error, // A potential error that may have occured while fetching the data
     warning, // A potential warning regarding missing references 
     loaded, // boolean that is false until the data is available
     loading, // boolean that is true on mount, and false once the data was fetched
     setFilter, // a callback to update the filters, e.g. setFilters({ q: 'query' })
     setPagination, // a callback to change the pagination, e.g. setPagination({ page: 2, perPage: 50 })
     setSort, // a callback to change the sort, e.g. setSort({ field: 'name', order: 'DESC' })
-    
-    setSortForList, // // a callback to set the sort with the same signature as the one from the ListContext. This is required to not break backward compatibility and will be removed in v4.
-}
+    setSortForList, // a callback to set the sort with the same signature as the one from the ListContext. This is required to avoid breaking backward compatibility and will be removed in v4
+} = useReferenceArrayInputContext();
 ```
 
 ### `<ReferenceInput>`

From 59e40973c86e3321ca51f3e69103d6536c55644a Mon Sep 17 00:00:00 2001
From: djhi <1122076+djhi@users.noreply.github.com>
Date: Tue, 23 Feb 2021 08:53:41 +0100
Subject: [PATCH 16/16] Apply review

---
 .../input/useReferenceArrayInputContext.ts    | 45 ++++++++++++++++---
 .../input/useReferenceArrayInputController.ts |  4 ++
 packages/ra-core/src/util/indexById.ts        | 14 ++++++
 .../src/input/ReferenceArrayInput.tsx         |  3 ++
 4 files changed, 59 insertions(+), 7 deletions(-)

diff --git a/packages/ra-core/src/controller/input/useReferenceArrayInputContext.ts b/packages/ra-core/src/controller/input/useReferenceArrayInputContext.ts
index b6a34059721..d5f96306b20 100644
--- a/packages/ra-core/src/controller/input/useReferenceArrayInputContext.ts
+++ b/packages/ra-core/src/controller/input/useReferenceArrayInputContext.ts
@@ -1,4 +1,5 @@
-import { useContext } from 'react';
+import { useContext, useMemo } from 'react';
+import merge from 'lodash/merge';
 import {
     ReferenceArrayInputContext,
     ReferenceArrayInputContextValue,
@@ -13,10 +14,40 @@ export const useReferenceArrayInputContext = <
     props: T
 ): ReferenceArrayInputContextValue => {
     const context = useContext(ReferenceArrayInputContext);
-
-    if (props.choices) {
-        return props;
-    }
-
-    return context;
+    // Props take precedence over the context
+    return useMemo(
+        () =>
+            merge(
+                {},
+                context,
+                props != null
+                    ? extractReferenceArrayInputContextProps(props)
+                    : {}
+            ),
+        [context, props]
+    );
 };
+
+const extractReferenceArrayInputContextProps = <
+    T extends ReferenceArrayInputContextValue = ReferenceArrayInputContextValue
+>({
+    choices,
+    error,
+    loaded,
+    loading,
+    setFilter,
+    setPagination,
+    setSort,
+    setSortForList,
+    warning,
+}: T) => ({
+    choices,
+    error,
+    loaded,
+    loading,
+    setFilter,
+    setPagination,
+    setSort,
+    setSortForList,
+    warning,
+});
diff --git a/packages/ra-core/src/controller/input/useReferenceArrayInputController.ts b/packages/ra-core/src/controller/input/useReferenceArrayInputController.ts
index dbcbbe98a83..5fdcebf7b5f 100644
--- a/packages/ra-core/src/controller/input/useReferenceArrayInputController.ts
+++ b/packages/ra-core/src/controller/input/useReferenceArrayInputController.ts
@@ -153,6 +153,10 @@ export const useReferenceArrayInputController = (
     // sort logic
     const sortRef = useRef(initialSort);
     const { sort, setSort } = useSortState(initialSort);
+
+    // ReferenceArrayInput.setSort had a different signature than the one from ListContext.
+    // In order to not break backward compatibility, we added this temporary setSortForList in the
+    // ReferenceArrayInputContext
     const setSortForList = useCallback(
         (field: string, order: string = 'ASC') => {
             setSort({ field, order });
diff --git a/packages/ra-core/src/util/indexById.ts b/packages/ra-core/src/util/indexById.ts
index bae5a1b5c8a..cc585cb5aac 100644
--- a/packages/ra-core/src/util/indexById.ts
+++ b/packages/ra-core/src/util/indexById.ts
@@ -1,5 +1,19 @@
 import { Record, RecordMap } from '../types';
 
+/**
+ * Create a map of records indexed by their id property from an array of records.
+ *
+ * @param {Record[]} records. The array of records
+ *
+ * @example
+ * const records = [{ id: 1, name: 'foo' }, { id: 2, name: 'bar' }];
+ * const map = indexById(records);
+ * // Map has the following structure:
+ * {
+ *     1: { id: 1, name: 'foo' },
+ *     2: { id: 2, name: 'bar' },
+ * }
+ */
 export const indexById = (records: Record[] = []): RecordMap =>
     records
         .filter(r => typeof r !== 'undefined')
diff --git a/packages/ra-ui-materialui/src/input/ReferenceArrayInput.tsx b/packages/ra-ui-materialui/src/input/ReferenceArrayInput.tsx
index aea6983ffb2..34200444bd4 100644
--- a/packages/ra-ui-materialui/src/input/ReferenceArrayInput.tsx
+++ b/packages/ra-ui-materialui/src/input/ReferenceArrayInput.tsx
@@ -146,6 +146,9 @@ const ReferenceArrayInput = ({
     const listContext = useMemo(
         () => ({
             ...controllerProps,
+            // ReferenceArrayInput.setSort had a different signature than the one from ListContext.
+            // In order to not break backward compatibility, we added this temporary setSortForList in the
+            // ReferenceArrayInputContext
             setSort: controllerProps.setSortForList,
         }),
         [controllerProps]