Fix AutocompleteInput optionValue with create raises a React warning

Author: slax57

packages/ra-core/src/form/choices/useChoices.tsx

@@ -83,7 +83,7 @@ export const useChoices = ({
     );
 
     const getChoiceValue = useCallback(
-        choice => get(choice, optionValue),
+        choice => get(choice, optionValue, get(choice, 'id')),
         [optionValue]
     );
 

packages/ra-ui-materialui/src/input/AutocompleteInput.spec.tsx

@@ -1496,6 +1496,24 @@ describe('<AutocompleteInput />', () => {
             ).toEqual('true');
             expect(screen.queryByText(/Create/)).toBeNull();
         });
+
+        it('should allow the creation of a new choice when using optionValue', async () => {
+            render(<OnCreate optionValue="_id" />);
+            const input = (await screen.findByLabelText(
+                'Author'
+            )) as HTMLInputElement;
+            // Enter an unknown value and submit it with Enter
+            await userEvent.type(input, 'New Value{Enter}');
+            await screen.getByDisplayValue('New Value');
+            // Clear the input, otherwise the new value won't be shown in the dropdown as it is selected
+            fireEvent.change(input, {
+                target: { value: '' },
+            });
+            // Open the dropdown
+            fireEvent.mouseDown(input);
+            // Check the new value is in the dropdown
+            await screen.findByText('New Value');
+        });
     });
     describe('create', () => {
         it('should allow the creation of a new choice', async () => {

packages/ra-ui-materialui/src/input/AutocompleteInput.stories.tsx

@@ -260,49 +260,55 @@ export const OptionTextElement = () => (
 
 const choicesForCreationSupport: Partial<{
     id: number;
+    _id: number;
     name: string;
     full_name: string;
     first_name: string;
     last_name: string;
 }>[] = [
     {
         id: 1,
+        _id: 1,
         name: 'Leo Tolstoy',
         full_name: 'Leo Tolstoy',
         first_name: 'Leo',
         last_name: 'Tolstoy',
     },
     {
         id: 2,
+        _id: 2,
         name: 'Victor Hugo',
         full_name: 'Victor Hugo',
         first_name: 'Victor',
         last_name: 'Hugo',
     },
     {
         id: 3,
+        _id: 3,
         name: 'William Shakespeare',
         full_name: 'William Shakespeare',
         first_name: 'William',
         last_name: 'Shakespeare',
     },
     {
         id: 4,
+        _id: 4,
         name: 'Charles Baudelaire',
         full_name: 'Charles Baudelaire',
         first_name: 'Charles',
         last_name: 'Baudelaire',
     },
     {
         id: 5,
+        _id: 5,
         name: 'Marcel Proust',
         full_name: 'Marcel Proust',
         first_name: 'Marcel',
         last_name: 'Proust',
     },
 ];
 
-const OnCreateInput = () => {
+const OnCreateInput = (props: Partial<AutocompleteInputProps>) => {
     const [choices, setChoices] = useState(choicesForCreationSupport);
     return (
         <AutocompleteInput
@@ -313,6 +319,7 @@ const OnCreateInput = () => {
 
                 const newOption = {
                     id: choices.length + 1,
+                    _id: choices.length + 1,
                     name: filter,
                 };
                 setChoices(options => [...options, newOption]);
@@ -323,15 +330,29 @@ const OnCreateInput = () => {
             TextFieldProps={{
                 placeholder: 'Start typing to create a new item',
             }}
+            {...props}
         />
     );
 };
 
-export const OnCreate = () => (
+export const OnCreate = (props: Partial<AutocompleteInputProps>) => (
     <Wrapper>
-        <OnCreateInput />
+        <OnCreateInput {...props} />
     </Wrapper>
 );
+OnCreate.args = {
+    optionValue: undefined,
+};
+OnCreate.argTypes = {
+    optionValue: {
+        options: ['default', '_id'],
+        mapping: {
+            default: undefined,
+            _id: '_id',
+        },
+        control: { type: 'inline-radio' },
+    },
+};
 
 const AutocompleteWithCreateInReferenceInput = () => {
     const [create] = useCreate();