Merge pull request #11364 from lprnmns/codex/fix-autocomplete-oncreate-autoselect

Fix AutocompleteInput clearing mouse selections on blur

Author: fzaninotto

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

@@ -26,6 +26,7 @@ import {
     InsideReferenceInputOnChange,
     WithInputProps,
     OnCreate,
+    OnCreateWithAutoSelect,
     OnCreateSlow,
     CreateLabel,
     CreateItemLabel,
@@ -1212,6 +1213,18 @@ describe('<AutocompleteInput />', () => {
     });
 
     describe('onCreate', () => {
+        it('should keep a clicked choice on blur when autoSelect is enabled', async () => {
+            render(<OnCreateWithAutoSelect />);
+            const input = (await screen.findByLabelText(
+                'Author'
+            )) as HTMLInputElement;
+
+            fireEvent.focus(input);
+            fireEvent.click(await screen.findByText('Victor Hugo'));
+            fireEvent.blur(input);
+
+            expect(input.value).toEqual('Victor Hugo');
+        });
         it("shouldn't include an option with the create label when the input is empty", async () => {
             render(<OnCreate />);
             const input = (await screen.findByLabelText(

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

@@ -375,6 +375,12 @@ OnCreate.argTypes = {
     },
 };
 
+export const OnCreateWithAutoSelect = () => (
+    <Wrapper>
+        <OnCreateInput autoSelect autoHighlight />
+    </Wrapper>
+);
+
 const AutocompleteWithCreateInReferenceInput = () => {
     const [create] = useCreate();
     const handleCreateAuthor = async (authorName?: string) => {

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

@@ -619,6 +619,13 @@ If you provided a React element for the optionText prop, you must also provide t
         (event: any, newValue: any, reason: AutocompleteChangeReason) => {
             // This prevents auto-submitting a form inside a dialog passed to the `create` prop
             event.preventDefault();
+            if (
+                reason === 'blur' &&
+                typeof newValue === 'string' &&
+                doesQueryMatchSelection(newValue)
+            ) {
+                return;
+            }
             if (reason === 'createOption') {
                 // When users press the enter key after typing a new value, we can handle it as if they clicked on the create option
                 handleChangeWithCreateSupport(
@@ -634,7 +641,12 @@ If you provided a React element for the optionText prop, you must also provide t
                 newValue != null ? newValue : emptyValue
             );
         },
-        [emptyValue, getCreateItem, handleChangeWithCreateSupport]
+        [
+            doesQueryMatchSelection,
+            emptyValue,
+            getCreateItem,
+            handleChangeWithCreateSupport,
+        ]
     );
 
     const oneSecondHasPassed = useTimeout(1000, filterValue);