From 5017244e4bc96b6a226af17f08084b00b3cfdd0e Mon Sep 17 00:00:00 2001
From: Travis CI <travis@travis-ci.org>
Date: Wed, 9 Feb 2022 14:49:34 +0100
Subject: [PATCH 1/7] Avoid cloning element for optionText

---
 UPGRADE.md                                    | 21 ++++++++++++++++
 .../form/{useChoices.ts => useChoices.tsx}    | 12 ++++++---
 .../src/input/AutocompleteArrayInput.spec.tsx | 13 +++++++---
 .../src/input/AutocompleteInput.spec.tsx      |  8 +++---
 .../src/input/AutocompleteInput.tsx           | 25 ++++++++-----------
 .../src/input/CheckboxGroupInput.spec.tsx     | 15 +++++++----
 .../src/input/CheckboxGroupInput.tsx          | 16 +++---------
 .../src/input/RadioButtonGroupInput.spec.tsx  | 13 +++++++---
 .../src/input/RadioButtonGroupInput.tsx       |  6 ++---
 .../src/input/SelectArrayInput.spec.tsx       | 11 ++++++--
 .../src/input/SelectArrayInput.tsx            |  4 +--
 .../src/input/SelectInput.spec.tsx            | 15 +++++++----
 .../src/input/SelectInput.tsx                 | 13 ++++++----
 13 files changed, 108 insertions(+), 64 deletions(-)
 rename packages/ra-core/src/form/{useChoices.ts => useChoices.tsx} (86%)

diff --git a/UPGRADE.md b/UPGRADE.md
index 8e62129b0c7..498961a7559 100644
--- a/UPGRADE.md
+++ b/UPGRADE.md
@@ -1413,6 +1413,27 @@ const PostShow = () => (
 };
 ```
 
+## `<AutocompleteInput>`, `<AutocompleteArrayInput>`, `<SelectInput>`, `<SelectArrayInput>`, `<CheckboxGroupInput>` and `<RadioButtonGroupInput>` No Longer Inject Props To React Elements Passed as `optionText`
+
+To access the record, you can use the `useRecordContext` hook.
+
+```diff
+const choices = [
+   { id: 123, first_name: 'Leo', last_name: 'Tolstoi' },
+   { id: 456, first_name: 'Jane', last_name: 'Austen' },
+];
+
+-const FullNameField = ({ record }) => {
++const FullNameField = () => {
++    const record = useRecordContext();    
+    return <span>{record.first_name} {record.last_name}</span>;
+}
+
+const AuthorsInput = () => {
+    <RadioButtonGroupInput source="authors" choices={choices} optionText={<FullNameField />}/>
+}
+```
+
 ## `useListContext` No Longer Returns An `ids` Prop
 
 The `ListContext` used to return two props for the list data: `data` and `ids`. To render the list data, you had to iterate over the `ids`. 
diff --git a/packages/ra-core/src/form/useChoices.ts b/packages/ra-core/src/form/useChoices.tsx
similarity index 86%
rename from packages/ra-core/src/form/useChoices.ts
rename to packages/ra-core/src/form/useChoices.tsx
index 9b4ccf2437c..365a935d36e 100644
--- a/packages/ra-core/src/form/useChoices.ts
+++ b/packages/ra-core/src/form/useChoices.tsx
@@ -1,8 +1,10 @@
-import { ReactElement, isValidElement, cloneElement, useCallback } from 'react';
+import * as React from 'react';
+import { ReactElement, isValidElement, useCallback } from 'react';
 import get from 'lodash/get';
 
 import { useTranslate } from '../i18n';
 import { RaRecord } from '../types';
+import { RecordContextProvider } from '../controller';
 
 export type OptionTextElement = ReactElement<{
     record: RaRecord;
@@ -48,9 +50,11 @@ export const useChoices = ({
     const getChoiceText = useCallback(
         choice => {
             if (isValidElement<{ record: any }>(optionText)) {
-                return cloneElement<{ record: any }>(optionText, {
-                    record: choice,
-                });
+                return (
+                    <RecordContextProvider value={choice}>
+                        {optionText}
+                    </RecordContextProvider>
+                );
             }
             const choiceName =
                 typeof optionText === 'function'
diff --git a/packages/ra-ui-materialui/src/input/AutocompleteArrayInput.spec.tsx b/packages/ra-ui-materialui/src/input/AutocompleteArrayInput.spec.tsx
index 0e8defe38e9..1e035cc61a1 100644
--- a/packages/ra-ui-materialui/src/input/AutocompleteArrayInput.spec.tsx
+++ b/packages/ra-ui-materialui/src/input/AutocompleteArrayInput.spec.tsx
@@ -1,7 +1,11 @@
 import * as React from 'react';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { testDataProvider, TestTranslationProvider } from 'ra-core';
+import {
+    testDataProvider,
+    TestTranslationProvider,
+    useRecordContext,
+} from 'ra-core';
 
 import { AdminContext } from '../AdminContext';
 import { SimpleForm } from '../form';
@@ -478,9 +482,10 @@ describe('<AutocompleteArrayInput />', () => {
     });
 
     it('should allow customized rendering of suggesting item', () => {
-        const SuggestionItem = ({ record }: { record?: any }) => (
-            <div aria-label={record.name} />
-        );
+        const SuggestionItem = props => {
+            const record = useRecordContext();
+            return <div {...props} aria-label={record && record.name} />;
+        };
 
         render(
             <AdminContext dataProvider={testDataProvider()}>
diff --git a/packages/ra-ui-materialui/src/input/AutocompleteInput.spec.tsx b/packages/ra-ui-materialui/src/input/AutocompleteInput.spec.tsx
index eeb5dbb593e..25e41724999 100644
--- a/packages/ra-ui-materialui/src/input/AutocompleteInput.spec.tsx
+++ b/packages/ra-ui-materialui/src/input/AutocompleteInput.spec.tsx
@@ -5,6 +5,7 @@ import {
     FormDataConsumer,
     testDataProvider,
     TestTranslationProvider,
+    useRecordContext,
 } from 'ra-core';
 import { AdminContext } from '../AdminContext';
 import { SimpleForm } from '../form';
@@ -433,9 +434,10 @@ describe('<AutocompleteInput />', () => {
     });
 
     it('should allow customized rendering of suggesting item', () => {
-        const SuggestionItem = ({ record, ...rest }: { record?: any }) => (
-            <div {...rest} aria-label={record && record.name} />
-        );
+        const SuggestionItem = props => {
+            const record = useRecordContext();
+            return <div {...props} aria-label={record && record.name} />;
+        };
 
         render(
             <AdminContext dataProvider={testDataProvider()}>
diff --git a/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx b/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx
index b6daf979112..99c58671088 100644
--- a/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx
+++ b/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import {
-    cloneElement,
     isValidElement,
     useCallback,
     useEffect,
@@ -72,8 +71,8 @@ import { sanitizeInputRestProps } from './sanitizeInputRestProps';
  * const optionRenderer = choice => `${choice.first_name} ${choice.last_name}`;
  * <AutocompleteInput source="author_id" choices={choices} optionText={optionRenderer} />
  *
- * `optionText` also accepts a React Element, that will be cloned and receive
- * the related choice as the `record` prop. You can use Field components there.
+ * `optionText` also accepts a React Element, that can access the
+ * the related choice through the `useRecordContext` hook. You can use Field components there.
  * Note that you must also specify the `matchSuggestion` and `inputText` props
  * @example
  * const choices = [
@@ -83,8 +82,11 @@ import { sanitizeInputRestProps } from './sanitizeInputRestProps';
  * const matchSuggestion = (filterValue, choice) => choice.first_name.match(filterValue) || choice.last_name.match(filterValue)
  * const inputText = (record) => `${record.fullName} (${record.language})`;
  *
- * const FullNameField = ({ record }) => <span>{record.first_name} {record.last_name}</span>;
- * <SelectInput source="gender" choices={choices} optionText={<FullNameField />} matchSuggestion={matchSuggestion} inputText={inputText} />
+ * const FullNameField = () => {
+ *     const record = useRecordContext();
+ *     return <span>{record.first_name} {record.last_name}</span>;
+ * }
+ * <SelectInput source="author" choices={choices} optionText={<FullNameField />} matchSuggestion={matchSuggestion} inputText={inputText} />
  *
  * The choices are translated by default, so you can use translation identifiers as choices:
  * @example
@@ -496,16 +498,9 @@ If you provided a React element for the optionText prop, you must also provide t
                 onChange={handleAutocompleteChange}
                 onBlur={field.onBlur}
                 onInputChange={handleInputChange}
-                renderOption={(props, record) => {
-                    if (isValidElement(optionText)) {
-                        return cloneElement(optionText, {
-                            record: record as RaRecord,
-                            ...props,
-                        });
-                    }
-
-                    return <li {...props}>{getChoiceText(record)}</li>;
-                }}
+                renderOption={(props, record) => (
+                    <li {...props}>{getChoiceText(record)}</li>
+                )}
             />
             {createElement}
         </Root>
diff --git a/packages/ra-ui-materialui/src/input/CheckboxGroupInput.spec.tsx b/packages/ra-ui-materialui/src/input/CheckboxGroupInput.spec.tsx
index d22227e3222..f7f609827b4 100644
--- a/packages/ra-ui-materialui/src/input/CheckboxGroupInput.spec.tsx
+++ b/packages/ra-ui-materialui/src/input/CheckboxGroupInput.spec.tsx
@@ -1,7 +1,11 @@
 import * as React from 'react';
 import expect from 'expect';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
-import { testDataProvider, TestTranslationProvider } from 'ra-core';
+import {
+    testDataProvider,
+    TestTranslationProvider,
+    useRecordContext,
+} from 'ra-core';
 
 import { AdminContext } from '../AdminContext';
 import { SimpleForm } from '../form';
@@ -138,15 +142,16 @@ describe('<CheckboxGroupInput />', () => {
     });
 
     it('should use optionText with an element value as text identifier', () => {
-        const Foobar = ({ record }) => (
-            <span data-testid="label">{record.foobar}</span>
-        );
+        const Foobar = () => {
+            const record = useRecordContext();
+            return <span data-testid="label">{record.foobar}</span>;
+        };
         render(
             <AdminContext dataProvider={testDataProvider()}>
                 <SimpleForm onSubmit={jest.fn}>
                     <CheckboxGroupInput
                         {...defaultProps}
-                        optionText={<Foobar record={{}} />}
+                        optionText={<Foobar />}
                         choices={[{ id: 'foo', foobar: 'Bar' }]}
                     />
                 </SimpleForm>
diff --git a/packages/ra-ui-materialui/src/input/CheckboxGroupInput.tsx b/packages/ra-ui-materialui/src/input/CheckboxGroupInput.tsx
index f0b0fa0fbfd..59f8c27dcd6 100644
--- a/packages/ra-ui-materialui/src/input/CheckboxGroupInput.tsx
+++ b/packages/ra-ui-materialui/src/input/CheckboxGroupInput.tsx
@@ -60,8 +60,8 @@ import { LinearProgress } from '../layout';
  * const optionRenderer = choice => `${choice.first_name} ${choice.last_name}`;
  * <CheckboxGroupInput source="recipients" choices={choices} optionText={optionRenderer} />
  *
- * `optionText` also accepts a React Element, that will be cloned and receive
- * the related choice as the `record` prop. You can use Field components there.
+ * `optionText` also accepts a React Element, that can access the
+ * the related choice through the `useRecordContext` hook. You can use Field components there.
  * @example
  * const choices = [
  *    { id: 123, first_name: 'Leo', last_name: 'Tolstoi' },
@@ -81,7 +81,7 @@ import { LinearProgress } from '../layout';
  * However, in some cases (e.g. inside a `<ReferenceArrayInput>`), you may not want
  * the choice to be translated. In that case, set the `translateChoice` prop to false.
  * @example
- * <CheckboxGroupInput source="gender" choices={choices} translateChoice={false}/>
+ * <CheckboxGroupInput source="tags" choices={choices} translateChoice={false}/>
  *
  * The object passed as `options` props is passed to the material-ui <Checkbox> components
  */
@@ -236,15 +236,7 @@ const sanitizeRestProps = ({
 }: any) => sanitizeInputRestProps(rest);
 
 CheckboxGroupInput.propTypes = {
-    // @ts-ignore
-    choices: PropTypes.arrayOf(
-        PropTypes.shape({
-            id: PropTypes.oneOfType([
-                PropTypes.string.isRequired,
-                PropTypes.number.isRequired,
-            ]).isRequired,
-        })
-    ),
+    choices: PropTypes.arrayOf(PropTypes.any),
     className: PropTypes.string,
     source: PropTypes.string,
     optionText: PropTypes.oneOfType([
diff --git a/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.spec.tsx b/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.spec.tsx
index e97548a4199..3ab838e3901 100644
--- a/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.spec.tsx
+++ b/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.spec.tsx
@@ -1,7 +1,11 @@
 import * as React from 'react';
 import expect from 'expect';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
-import { testDataProvider, TestTranslationProvider } from 'ra-core';
+import {
+    testDataProvider,
+    TestTranslationProvider,
+    useRecordContext,
+} from 'ra-core';
 
 import { AdminContext } from '../AdminContext';
 import { SimpleForm } from '../form';
@@ -238,9 +242,10 @@ describe('<RadioButtonGroupInput />', () => {
     });
 
     it('should use optionText with an element value as text identifier', () => {
-        const Foobar = ({ record }: { record?: any }) => (
-            <span>{record.longname}</span>
-        );
+        const Foobar = () => {
+            const record = useRecordContext();
+            return <span data-testid="label">{record.longname}</span>;
+        };
         render(
             <AdminContext dataProvider={testDataProvider()}>
                 <SimpleForm defaultValues={{ type: 'mc' }} onSubmit={jest.fn()}>
diff --git a/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.tsx b/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.tsx
index 7efc213f54d..0e2755940c8 100644
--- a/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.tsx
+++ b/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.tsx
@@ -58,15 +58,15 @@ import { LinearProgress } from '../layout';
  * const optionRenderer = choice => `${choice.first_name} ${choice.last_name}`;
  * <CheckboxGroupInput source="recipients" choices={choices} optionText={optionRenderer} />
  *
- * `optionText` also accepts a React Element, that will be cloned and receive
- * the related choice as the `record` prop. You can use Field components there.
+ * `optionText` also accepts a React Element, that can access the
+ * the related choice through the `useRecordContext` hook. You can use Field components there.
  * @example
  * const choices = [
  *    { id: 123, first_name: 'Leo', last_name: 'Tolstoi' },
  *    { id: 456, first_name: 'Jane', last_name: 'Austen' },
  * ];
  * const FullNameField = ({ record }) => <span>{record.first_name} {record.last_name}</span>;
- * <RadioButtonGroupInput source="gender" choices={choices} optionText={<FullNameField />}/>
+ * <RadioButtonGroupInput source="recipients" choices={choices} optionText={<FullNameField />}/>
  *
  * The choices are translated by default, so you can use translation identifiers as choices:
  * @example
diff --git a/packages/ra-ui-materialui/src/input/SelectArrayInput.spec.tsx b/packages/ra-ui-materialui/src/input/SelectArrayInput.spec.tsx
index fcc263ed0d9..12ed303e29f 100644
--- a/packages/ra-ui-materialui/src/input/SelectArrayInput.spec.tsx
+++ b/packages/ra-ui-materialui/src/input/SelectArrayInput.spec.tsx
@@ -1,7 +1,11 @@
 import * as React from 'react';
 import expect from 'expect';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
-import { testDataProvider, TestTranslationProvider } from 'ra-core';
+import {
+    testDataProvider,
+    TestTranslationProvider,
+    useRecordContext,
+} from 'ra-core';
 
 import { AdminContext } from '../AdminContext';
 import { SimpleForm } from '../form';
@@ -170,7 +174,10 @@ describe('<SelectArrayInput />', () => {
     });
 
     it('should use optionText with an element value as text identifier', () => {
-        const Foobar = ({ record = undefined }) => <span>{record.foobar}</span>;
+        const Foobar = () => {
+            const record = useRecordContext();
+            return <span>{record.foobar}</span>;
+        };
         render(
             <AdminContext dataProvider={testDataProvider()}>
                 <SimpleForm onSubmit={jest.fn()}>
diff --git a/packages/ra-ui-materialui/src/input/SelectArrayInput.tsx b/packages/ra-ui-materialui/src/input/SelectArrayInput.tsx
index f8fa6e7ab44..7c2973e198a 100644
--- a/packages/ra-ui-materialui/src/input/SelectArrayInput.tsx
+++ b/packages/ra-ui-materialui/src/input/SelectArrayInput.tsx
@@ -62,8 +62,8 @@ import {
  * const optionRenderer = choice => `${choice.first_name} ${choice.last_name}`;
  * <SelectArrayInput source="authors" choices={choices} optionText={optionRenderer} />
  *
- * `optionText` also accepts a React Element, that will be cloned and receive
- * the related choice as the `record` prop. You can use Field components there.
+ * `optionText` also accepts a React Element, that can access the
+ * the related choice through the `useRecordContext` hook. You can use Field components there.
  * @example
  * const choices = [
  *    { id: 123, first_name: 'Leo', last_name: 'Tolstoi' },
diff --git a/packages/ra-ui-materialui/src/input/SelectInput.spec.tsx b/packages/ra-ui-materialui/src/input/SelectInput.spec.tsx
index 966f84c8a79..fdd345b1ab9 100644
--- a/packages/ra-ui-materialui/src/input/SelectInput.spec.tsx
+++ b/packages/ra-ui-materialui/src/input/SelectInput.spec.tsx
@@ -1,6 +1,11 @@
 import * as React from 'react';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
-import { required, testDataProvider, TestTranslationProvider } from 'ra-core';
+import {
+    required,
+    testDataProvider,
+    TestTranslationProvider,
+    useRecordContext,
+} from 'ra-core';
 
 import { AdminContext } from '../AdminContext';
 import { SimpleForm } from '../form';
@@ -249,10 +254,10 @@ describe('<SelectInput />', () => {
     });
 
     it('should use optionText with an element value as text identifier', () => {
-        const Foobar = ({ record }: { record?: any }) => (
-            <span data-value={record.id} aria-label={record.foobar} />
-        );
-
+        const Foobar = () => {
+            const record = useRecordContext();
+            return <span data-value={record.id} aria-label={record.foobar} />;
+        };
         render(
             <AdminContext dataProvider={testDataProvider()}>
                 <SimpleForm onSubmit={jest.fn()}>
diff --git a/packages/ra-ui-materialui/src/input/SelectInput.tsx b/packages/ra-ui-materialui/src/input/SelectInput.tsx
index d017e626df9..de8e9fd1f02 100644
--- a/packages/ra-ui-materialui/src/input/SelectInput.tsx
+++ b/packages/ra-ui-materialui/src/input/SelectInput.tsx
@@ -60,15 +60,18 @@ import {
  * const optionRenderer = choice => `${choice.first_name} ${choice.last_name}`;
  * <SelectInput source="author_id" choices={choices} optionText={optionRenderer} />
  *
- * `optionText` also accepts a React Element, that will be cloned and receive
- * the related choice as the `record` prop. You can use Field components there.
+ * `optionText` also accepts a React Element, that can access the
+ * the related choice through the `useRecordContext` hook. You can use Field components there.
  * @example
  * const choices = [
  *    { id: 123, first_name: 'Leo', last_name: 'Tolstoi' },
  *    { id: 456, first_name: 'Jane', last_name: 'Austen' },
  * ];
- * const FullNameField = ({ record }) => <span>{record.first_name} {record.last_name}</span>;
- * <SelectInput source="gender" choices={choices} optionText={<FullNameField />}/>
+ * const FullNameField = () => {
+ *     const record = useRecordContext();
+ *     return <span>{record.first_name} {record.last_name}</span>;
+ * }
+ * <SelectInput source="author" choices={choices} optionText={<FullNameField />}/>
  *
  * The choices are translated by default, so you can use translation identifiers as choices:
  * @example
@@ -168,7 +171,7 @@ export const SelectInput = (props: SelectInputProps) => {
 
     const renderEmptyItemOption = useCallback(() => {
         return React.isValidElement(emptyText)
-            ? React.cloneElement(emptyText)
+            ? emptyText
             : emptyText === ''
             ? ' ' // em space, forces the display of an empty line of normal height
             : translate(emptyText, { _: emptyText });

From 4e2e55c98b32bc501ed0de236f908503ed06e109 Mon Sep 17 00:00:00 2001
From: Travis CI <travis@travis-ci.org>
Date: Wed, 9 Feb 2022 16:55:11 +0100
Subject: [PATCH 2/7] Fix tests

---
 packages/ra-core/src/form/useChoices.spec.tsx        |  8 +++++---
 .../ra-ui-materialui/src/field/SelectField.spec.tsx  | 12 ++++++------
 packages/ra-ui-materialui/src/field/SelectField.tsx  |  4 ++--
 3 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/packages/ra-core/src/form/useChoices.spec.tsx b/packages/ra-core/src/form/useChoices.spec.tsx
index 83a3b0f6e31..659deb84d91 100644
--- a/packages/ra-core/src/form/useChoices.spec.tsx
+++ b/packages/ra-core/src/form/useChoices.spec.tsx
@@ -4,6 +4,7 @@ import { render, screen } from '@testing-library/react';
 
 import { useChoices } from './useChoices';
 import { TestTranslationProvider } from '../i18n';
+import { useRecordContext } from '../controller';
 
 describe('useChoices hook', () => {
     const defaultProps = {
@@ -56,9 +57,10 @@ describe('useChoices hook', () => {
     });
 
     it('should use optionText with an element value as text identifier', () => {
-        const Foobar = ({ record }: { record?: any }) => (
-            <span>{record.foobar}</span>
-        );
+        const Foobar = () => {
+            const record = useRecordContext();
+            return <span>{record.foobar}</span>;
+        };
         render(
             <Component
                 {...defaultProps}
diff --git a/packages/ra-ui-materialui/src/field/SelectField.spec.tsx b/packages/ra-ui-materialui/src/field/SelectField.spec.tsx
index 1fc9b070e2b..a14ae272946 100644
--- a/packages/ra-ui-materialui/src/field/SelectField.spec.tsx
+++ b/packages/ra-ui-materialui/src/field/SelectField.spec.tsx
@@ -1,11 +1,10 @@
 import * as React from 'react';
-import { FC } from 'react';
 import expect from 'expect';
 import { render, screen } from '@testing-library/react';
 import {
-    RaRecord,
-    TestTranslationProvider,
     RecordContextProvider,
+    TestTranslationProvider,
+    useRecordContext,
 } from 'ra-core';
 
 import { SelectField } from './SelectField';
@@ -123,9 +122,10 @@ describe('<SelectField />', () => {
     });
 
     it('should use optionText with an element value as text identifier', () => {
-        const Foobar: FC<{ record?: RaRecord }> = ({ record }) => (
-            <span>{record.foobar}</span>
-        );
+        const Foobar = () => {
+            const record = useRecordContext();
+            return <span>{record.foobar}</span>;
+        };
         render(
             <SelectField
                 {...defaultProps}
diff --git a/packages/ra-ui-materialui/src/field/SelectField.tsx b/packages/ra-ui-materialui/src/field/SelectField.tsx
index c635669adad..5989c38b469 100644
--- a/packages/ra-ui-materialui/src/field/SelectField.tsx
+++ b/packages/ra-ui-materialui/src/field/SelectField.tsx
@@ -43,8 +43,8 @@ import { PublicFieldProps, InjectedFieldProps, fieldPropTypes } from './types';
  * const optionRenderer = choice => `${choice.first_name} ${choice.last_name}`;
  * <SelectField source="author_id" choices={choices} optionText={optionRenderer} />
  *
- * `optionText` also accepts a React Element, that will be cloned and receive
- * the related choice as the `record` prop. You can use Field components there.
+ * `optionText` also accepts a React Element, that can access the
+ * the related choice through the `useRecordContext` hook. You can use Field components there.
  * @example
  * const choices = [
  *    { id: 123, first_name: 'Leo', last_name: 'Tolstoi' },

From 1d02c81b29aa10a3adb7582909a9338db3dd33f3 Mon Sep 17 00:00:00 2001
From: Travis CI <travis@travis-ci.org>
Date: Wed, 9 Feb 2022 17:09:43 +0100
Subject: [PATCH 3/7] Fix simple example

---
 examples/simple/src/comments/CommentEdit.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/examples/simple/src/comments/CommentEdit.tsx b/examples/simple/src/comments/CommentEdit.tsx
index f2f9b615e66..905f022cd63 100644
--- a/examples/simple/src/comments/CommentEdit.tsx
+++ b/examples/simple/src/comments/CommentEdit.tsx
@@ -27,6 +27,7 @@ import {
     useCreateSuggestionContext,
     useCreate,
     useCreatePath,
+    useRecordContext,
 } from 'react-admin';
 
 const LinkToRelatedPost = ({ record }: { record?: RaRecord }) => {
@@ -46,11 +47,12 @@ const LinkToRelatedPost = ({ record }: { record?: RaRecord }) => {
     );
 };
 
-const OptionRenderer = ({ record, ...rest }: { record?: RaRecord }) => {
+const OptionRenderer = (props: any) => {
+    const record = useRecordContext();
     return record.id === '@@ra-create' ? (
-        <div {...rest}>{record.name}</div>
+        <div {...props}>{record.name}</div>
     ) : (
-        <div {...rest}>
+        <div {...props}>
             {record?.title} - {record?.id}
         </div>
     );

From 10c8746a54220062ad71ec88f2a0c6e910456cb2 Mon Sep 17 00:00:00 2001
From: Gildas Garcia <1122076+djhi@users.noreply.github.com>
Date: Thu, 10 Feb 2022 13:51:00 +0100
Subject: [PATCH 4/7] Apply suggestions from code review
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Aníbal Svarcas <WiXSL@users.noreply.github.com>
---
 packages/ra-ui-materialui/src/field/SelectField.tsx           | 2 +-
 packages/ra-ui-materialui/src/input/AutocompleteInput.tsx     | 2 +-
 packages/ra-ui-materialui/src/input/CheckboxGroupInput.tsx    | 2 +-
 packages/ra-ui-materialui/src/input/RadioButtonGroupInput.tsx | 2 +-
 packages/ra-ui-materialui/src/input/SelectArrayInput.tsx      | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/ra-ui-materialui/src/field/SelectField.tsx b/packages/ra-ui-materialui/src/field/SelectField.tsx
index 5989c38b469..757760a469f 100644
--- a/packages/ra-ui-materialui/src/field/SelectField.tsx
+++ b/packages/ra-ui-materialui/src/field/SelectField.tsx
@@ -43,7 +43,7 @@ import { PublicFieldProps, InjectedFieldProps, fieldPropTypes } from './types';
  * const optionRenderer = choice => `${choice.first_name} ${choice.last_name}`;
  * <SelectField source="author_id" choices={choices} optionText={optionRenderer} />
  *
- * `optionText` also accepts a React Element, that can access the
+ * `optionText` also accepts a React Element, that can access 
  * the related choice through the `useRecordContext` hook. You can use Field components there.
  * @example
  * const choices = [
diff --git a/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx b/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx
index 99c58671088..7cd02857cb4 100644
--- a/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx
+++ b/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx
@@ -71,7 +71,7 @@ import { sanitizeInputRestProps } from './sanitizeInputRestProps';
  * const optionRenderer = choice => `${choice.first_name} ${choice.last_name}`;
  * <AutocompleteInput source="author_id" choices={choices} optionText={optionRenderer} />
  *
- * `optionText` also accepts a React Element, that can access the
+ * `optionText` also accepts a React Element, that can access 
  * the related choice through the `useRecordContext` hook. You can use Field components there.
  * Note that you must also specify the `matchSuggestion` and `inputText` props
  * @example
diff --git a/packages/ra-ui-materialui/src/input/CheckboxGroupInput.tsx b/packages/ra-ui-materialui/src/input/CheckboxGroupInput.tsx
index 59f8c27dcd6..83144adb371 100644
--- a/packages/ra-ui-materialui/src/input/CheckboxGroupInput.tsx
+++ b/packages/ra-ui-materialui/src/input/CheckboxGroupInput.tsx
@@ -60,7 +60,7 @@ import { LinearProgress } from '../layout';
  * const optionRenderer = choice => `${choice.first_name} ${choice.last_name}`;
  * <CheckboxGroupInput source="recipients" choices={choices} optionText={optionRenderer} />
  *
- * `optionText` also accepts a React Element, that can access the
+ * `optionText` also accepts a React Element, that can access 
  * the related choice through the `useRecordContext` hook. You can use Field components there.
  * @example
  * const choices = [
diff --git a/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.tsx b/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.tsx
index 0e2755940c8..57a9bb727cc 100644
--- a/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.tsx
+++ b/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.tsx
@@ -58,7 +58,7 @@ import { LinearProgress } from '../layout';
  * const optionRenderer = choice => `${choice.first_name} ${choice.last_name}`;
  * <CheckboxGroupInput source="recipients" choices={choices} optionText={optionRenderer} />
  *
- * `optionText` also accepts a React Element, that can access the
+ * `optionText` also accepts a React Element, that can access 
  * the related choice through the `useRecordContext` hook. You can use Field components there.
  * @example
  * const choices = [
diff --git a/packages/ra-ui-materialui/src/input/SelectArrayInput.tsx b/packages/ra-ui-materialui/src/input/SelectArrayInput.tsx
index 7c2973e198a..705f30c9111 100644
--- a/packages/ra-ui-materialui/src/input/SelectArrayInput.tsx
+++ b/packages/ra-ui-materialui/src/input/SelectArrayInput.tsx
@@ -62,7 +62,7 @@ import {
  * const optionRenderer = choice => `${choice.first_name} ${choice.last_name}`;
  * <SelectArrayInput source="authors" choices={choices} optionText={optionRenderer} />
  *
- * `optionText` also accepts a React Element, that can access the
+ * `optionText` also accepts a React Element, that can access 
  * the related choice through the `useRecordContext` hook. You can use Field components there.
  * @example
  * const choices = [

From 5175d12371b3126fe44c651aae92d344b7508729 Mon Sep 17 00:00:00 2001
From: Gildas Garcia <1122076+djhi@users.noreply.github.com>
Date: Thu, 10 Feb 2022 14:00:41 +0100
Subject: [PATCH 5/7] Update
 packages/ra-ui-materialui/src/input/SelectInput.tsx
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Aníbal Svarcas <WiXSL@users.noreply.github.com>
---
 packages/ra-ui-materialui/src/input/SelectInput.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ra-ui-materialui/src/input/SelectInput.tsx b/packages/ra-ui-materialui/src/input/SelectInput.tsx
index de8e9fd1f02..b94bc62234d 100644
--- a/packages/ra-ui-materialui/src/input/SelectInput.tsx
+++ b/packages/ra-ui-materialui/src/input/SelectInput.tsx
@@ -60,7 +60,7 @@ import {
  * const optionRenderer = choice => `${choice.first_name} ${choice.last_name}`;
  * <SelectInput source="author_id" choices={choices} optionText={optionRenderer} />
  *
- * `optionText` also accepts a React Element, that can access the
+ * `optionText` also accepts a React Element, that can access 
  * the related choice through the `useRecordContext` hook. You can use Field components there.
  * @example
  * const choices = [

From 29b1b26e3833374f4506a01e20983e9f75bb31bc Mon Sep 17 00:00:00 2001
From: Travis CI <travis@travis-ci.org>
Date: Thu, 10 Feb 2022 14:02:01 +0100
Subject: [PATCH 6/7] Fix linter warnings

---
 packages/ra-ui-materialui/src/field/SelectField.tsx           | 2 +-
 packages/ra-ui-materialui/src/input/AutocompleteInput.tsx     | 2 +-
 packages/ra-ui-materialui/src/input/CheckboxGroupInput.tsx    | 2 +-
 packages/ra-ui-materialui/src/input/RadioButtonGroupInput.tsx | 2 +-
 packages/ra-ui-materialui/src/input/SelectArrayInput.tsx      | 2 +-
 packages/ra-ui-materialui/src/input/SelectInput.tsx           | 2 +-
 6 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/ra-ui-materialui/src/field/SelectField.tsx b/packages/ra-ui-materialui/src/field/SelectField.tsx
index 757760a469f..df8e1f79f9d 100644
--- a/packages/ra-ui-materialui/src/field/SelectField.tsx
+++ b/packages/ra-ui-materialui/src/field/SelectField.tsx
@@ -43,7 +43,7 @@ import { PublicFieldProps, InjectedFieldProps, fieldPropTypes } from './types';
  * const optionRenderer = choice => `${choice.first_name} ${choice.last_name}`;
  * <SelectField source="author_id" choices={choices} optionText={optionRenderer} />
  *
- * `optionText` also accepts a React Element, that can access 
+ * `optionText` also accepts a React Element, that can access
  * the related choice through the `useRecordContext` hook. You can use Field components there.
  * @example
  * const choices = [
diff --git a/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx b/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx
index 7cd02857cb4..c202c577467 100644
--- a/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx
+++ b/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx
@@ -71,7 +71,7 @@ import { sanitizeInputRestProps } from './sanitizeInputRestProps';
  * const optionRenderer = choice => `${choice.first_name} ${choice.last_name}`;
  * <AutocompleteInput source="author_id" choices={choices} optionText={optionRenderer} />
  *
- * `optionText` also accepts a React Element, that can access 
+ * `optionText` also accepts a React Element, that can access
  * the related choice through the `useRecordContext` hook. You can use Field components there.
  * Note that you must also specify the `matchSuggestion` and `inputText` props
  * @example
diff --git a/packages/ra-ui-materialui/src/input/CheckboxGroupInput.tsx b/packages/ra-ui-materialui/src/input/CheckboxGroupInput.tsx
index 83144adb371..cc1c2f5e5f0 100644
--- a/packages/ra-ui-materialui/src/input/CheckboxGroupInput.tsx
+++ b/packages/ra-ui-materialui/src/input/CheckboxGroupInput.tsx
@@ -60,7 +60,7 @@ import { LinearProgress } from '../layout';
  * const optionRenderer = choice => `${choice.first_name} ${choice.last_name}`;
  * <CheckboxGroupInput source="recipients" choices={choices} optionText={optionRenderer} />
  *
- * `optionText` also accepts a React Element, that can access 
+ * `optionText` also accepts a React Element, that can access
  * the related choice through the `useRecordContext` hook. You can use Field components there.
  * @example
  * const choices = [
diff --git a/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.tsx b/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.tsx
index 57a9bb727cc..555e70a82b6 100644
--- a/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.tsx
+++ b/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.tsx
@@ -58,7 +58,7 @@ import { LinearProgress } from '../layout';
  * const optionRenderer = choice => `${choice.first_name} ${choice.last_name}`;
  * <CheckboxGroupInput source="recipients" choices={choices} optionText={optionRenderer} />
  *
- * `optionText` also accepts a React Element, that can access 
+ * `optionText` also accepts a React Element, that can access
  * the related choice through the `useRecordContext` hook. You can use Field components there.
  * @example
  * const choices = [
diff --git a/packages/ra-ui-materialui/src/input/SelectArrayInput.tsx b/packages/ra-ui-materialui/src/input/SelectArrayInput.tsx
index 705f30c9111..cddb658d89b 100644
--- a/packages/ra-ui-materialui/src/input/SelectArrayInput.tsx
+++ b/packages/ra-ui-materialui/src/input/SelectArrayInput.tsx
@@ -62,7 +62,7 @@ import {
  * const optionRenderer = choice => `${choice.first_name} ${choice.last_name}`;
  * <SelectArrayInput source="authors" choices={choices} optionText={optionRenderer} />
  *
- * `optionText` also accepts a React Element, that can access 
+ * `optionText` also accepts a React Element, that can access
  * the related choice through the `useRecordContext` hook. You can use Field components there.
  * @example
  * const choices = [
diff --git a/packages/ra-ui-materialui/src/input/SelectInput.tsx b/packages/ra-ui-materialui/src/input/SelectInput.tsx
index b94bc62234d..165ff34053d 100644
--- a/packages/ra-ui-materialui/src/input/SelectInput.tsx
+++ b/packages/ra-ui-materialui/src/input/SelectInput.tsx
@@ -60,7 +60,7 @@ import {
  * const optionRenderer = choice => `${choice.first_name} ${choice.last_name}`;
  * <SelectInput source="author_id" choices={choices} optionText={optionRenderer} />
  *
- * `optionText` also accepts a React Element, that can access 
+ * `optionText` also accepts a React Element, that can access
  * the related choice through the `useRecordContext` hook. You can use Field components there.
  * @example
  * const choices = [

From 126f7ccbd993c801e0eb2a15a86bff8db43d32ef Mon Sep 17 00:00:00 2001
From: Travis CI <travis@travis-ci.org>
Date: Thu, 10 Feb 2022 14:12:58 +0100
Subject: [PATCH 7/7] Fix jsdocs

---
 .../src/input/AutocompleteArrayInput.tsx         | 16 ++++++++++------
 .../src/input/AutocompleteInput.tsx              |  2 +-
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/packages/ra-ui-materialui/src/input/AutocompleteArrayInput.tsx b/packages/ra-ui-materialui/src/input/AutocompleteArrayInput.tsx
index d9debcbb990..4e85c00fa24 100644
--- a/packages/ra-ui-materialui/src/input/AutocompleteArrayInput.tsx
+++ b/packages/ra-ui-materialui/src/input/AutocompleteArrayInput.tsx
@@ -35,19 +35,23 @@ import { AutocompleteInput, AutocompleteInputProps } from './AutocompleteInput';
  * const optionRenderer = choice => `${choice.first_name} ${choice.last_name}`;
  * <AutocompleteArrayInput source="author_id" choices={choices} optionText={optionRenderer} />
  *
- * `optionText` also accepts a React Element, that will be cloned and receive
- * the related choice as the `record` prop. You can use Field components there.
- * Note that you must also specify the `matchSuggestion` prop
+ * `optionText` also accepts a React Element, that can access
+ * the related choice through the `useRecordContext` hook. You can use Field components there.
+ * Note that you must also specify the `matchSuggestion` and `inputText` props
  * @example
  * const choices = [
  *    { id: 123, first_name: 'Leo', last_name: 'Tolstoi' },
  *    { id: 456, first_name: 'Jane', last_name: 'Austen' },
  * ];
- * const matchSuggestion = (filterValue, choice) => choice.first_name.match(filterValue) || choice.last_name.match(filterValue);
+ * const matchSuggestion = (filterValue, choice) => choice.first_name.match(filterValue) || choice.last_name.match(filterValue)
  * const inputText = (record) => `${record.fullName} (${record.language})`;
- * const FullNameField = ({ record }) => <span>{record.first_name} {record.last_name}</span>;
  *
- * <SelectInput source="gender" choices={choices} optionText={<FullNameField />} matchSuggestion={matchSuggestion} />
+ * const FullNameField = () => {
+ *     const record = useRecordContext();
+ *     return <span>{record.first_name} {record.last_name}</span>;
+ * }
+ *
+ * <AutocompleteArrayInput source="gender" choices={choices} optionText={<FullNameField />} matchSuggestion={matchSuggestion} />
  *
  * The choices are translated by default, so you can use translation identifiers as choices:
  * @example
diff --git a/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx b/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx
index c202c577467..01f6f826345 100644
--- a/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx
+++ b/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx
@@ -86,7 +86,7 @@ import { sanitizeInputRestProps } from './sanitizeInputRestProps';
  *     const record = useRecordContext();
  *     return <span>{record.first_name} {record.last_name}</span>;
  * }
- * <SelectInput source="author" choices={choices} optionText={<FullNameField />} matchSuggestion={matchSuggestion} inputText={inputText} />
+ * <AutocompleteInput source="author" choices={choices} optionText={<FullNameField />} matchSuggestion={matchSuggestion} inputText={inputText} />
  *
  * The choices are translated by default, so you can use translation identifiers as choices:
  * @example