From d0b5d668a1aee0a881f248ff65991eb4d4fd7571 Mon Sep 17 00:00:00 2001
From: Antoine Fricker <antoine@marmelab.com>
Date: Fri, 8 Jul 2022 15:17:25 +0200
Subject: [PATCH 1/3] Fix

---
 packages/ra-ui-materialui/src/input/AutocompleteInput.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx b/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx
index dadfc3710e2..79388df49ca 100644
--- a/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx
+++ b/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx
@@ -375,7 +375,11 @@ If you provided a React element for the optionText prop, you must also provide t
                 selectedItemTexts = [getOptionLabel(selectedChoice)];
             }
 
-            return selectedItemTexts.includes(filter);
+            return (
+                filter !== '' &&
+                selectedChoice &&
+                selectedItemTexts.includes(filter)
+            );
         },
         [getOptionLabel, multiple, selectedChoice]
     );

From 47bb9088545ecf17e6e4924c0e4c53a5ec7f4f23 Mon Sep 17 00:00:00 2001
From: Antoine Fricker <antoine@marmelab.com>
Date: Fri, 8 Jul 2022 18:18:24 +0200
Subject: [PATCH 2/3] Limit changes made to "change' events

---
 .../ra-ui-materialui/src/input/AutocompleteInput.tsx | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx b/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx
index 79388df49ca..0b9f3eadd0c 100644
--- a/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx
+++ b/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx
@@ -357,14 +357,14 @@ If you provided a React element for the optionText prop, you must also provide t
         newInputValue: string,
         reason: string
     ) => {
-        if (!doesQueryMatchSelection(newInputValue)) {
+        if (!doesQueryMatchSelection(newInputValue, event?.type)) {
             setFilterValue(newInputValue);
             debouncedSetFilter(newInputValue);
         }
     };
 
     const doesQueryMatchSelection = useCallback(
-        filter => {
+        (filter: string, eventType?: string) => {
             let selectedItemTexts = [];
 
             if (multiple) {
@@ -375,11 +375,9 @@ If you provided a React element for the optionText prop, you must also provide t
                 selectedItemTexts = [getOptionLabel(selectedChoice)];
             }
 
-            return (
-                filter !== '' &&
-                selectedChoice &&
-                selectedItemTexts.includes(filter)
-            );
+            return eventType && eventType === 'change'
+                ? selectedItemTexts.includes(filter) && selectedChoice
+                : selectedItemTexts.includes(filter);
         },
         [getOptionLabel, multiple, selectedChoice]
     );

From 9781adb51a5df152863837c429cc210c79207114 Mon Sep 17 00:00:00 2001
From: Antoine Fricker <antoine@marmelab.com>
Date: Thu, 21 Jul 2022 13:00:19 +0200
Subject: [PATCH 3/3] Add unit test

---
 .../src/input/AutocompleteInput.spec.tsx      | 33 +++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/packages/ra-ui-materialui/src/input/AutocompleteInput.spec.tsx b/packages/ra-ui-materialui/src/input/AutocompleteInput.spec.tsx
index 829f7a64701..e3b8412c6d2 100644
--- a/packages/ra-ui-materialui/src/input/AutocompleteInput.spec.tsx
+++ b/packages/ra-ui-materialui/src/input/AutocompleteInput.spec.tsx
@@ -124,6 +124,39 @@ describe('<AutocompleteInput />', () => {
         });
     });
 
+    it('should allow to clear the first character', async () => {
+        render(
+            <AdminContext dataProvider={testDataProvider()}>
+                <SimpleForm onSubmit={jest.fn()} defaultValues={{ role: 2 }}>
+                    <AutocompleteInput
+                        {...defaultProps}
+                        optionText="foobar"
+                        choices={[
+                            { id: 2, foobar: 'foo' },
+                            { id: 3, foobar: 'bar' },
+                        ]}
+                    />
+                </SimpleForm>
+            </AdminContext>
+        );
+
+        const input = screen.getByLabelText(
+            'resources.users.fields.role'
+        ) as HTMLInputElement;
+
+        fireEvent.focus(input);
+
+        userEvent.type(input, 'f');
+        await waitFor(() => {
+            expect(input.value).toEqual('f');
+        });
+
+        userEvent.type(input, '{backspace}');
+        await waitFor(() => {
+            expect(input.value).toEqual('');
+        });
+    });
+
     it('should use optionText with a string value including "." as text identifier', async () => {
         render(
             <AdminContext dataProvider={testDataProvider()}>