Merge pull request #9718 from marmelab/Fix-autocomplete-loses-focus-o…

…n-select Fix Autocomplete loses focus on select
marmelab · Mar 13, 2024 · 178a2d6 · 178a2d6
2 parents c602885 + ff4ed52
commit 178a2d6
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 9 deletions.
diff --git a/packages/ra-ui-materialui/src/input/AutocompleteArrayInput.spec.tsx b/packages/ra-ui-materialui/src/input/AutocompleteArrayInput.spec.tsx
@@ -1081,7 +1081,9 @@ describe('<AutocompleteArrayInput />', () => {
             );
         });
         expect(screen.getByDisplayValue('Russian')).not.toBeNull();
-        screen.getAllByRole('textbox')[0].focus();
+        fireEvent.keyDown(screen.getAllByRole('textbox')[0], {
+            key: 'ArrowDown',
+        });
         fireEvent.click(await screen.findByText('Victor Hugo'));
         await waitFor(() => {
             expect(onChange).toHaveBeenCalledWith(

diff --git a/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx b/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx
@@ -555,7 +555,6 @@ If you provided a React element for the optionText prop, you must also provide t
     return (
         <>
             <StyledAutocomplete
-                blurOnSelect
                 className={clsx('ra-input', `ra-input-${source}`, className)}
                 clearText={translate(clearText, { _: clearText })}
                 closeText={translate(closeText, { _: closeText })}

diff --git a/packages/ra-ui-materialui/src/list/filter/FilterButton.spec.tsx b/packages/ra-ui-materialui/src/list/filter/FilterButton.spec.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import expect from 'expect';
 import { render, fireEvent, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { createTheme } from '@mui/material/styles';
 
 import { AdminContext } from '../../AdminContext';
@@ -25,6 +26,10 @@ describe('<FilterButton />', () => {
         filterValues: {},
     };
 
+    beforeAll(() => {
+        window.scrollTo = jest.fn();
+    });
+
     describe('filter selection menu', () => {
         it('should display only hidden filters', () => {
             const hiddenFilter = (
@@ -189,14 +194,14 @@ describe('<FilterButton />', () => {
             render(<WithAutoCompleteArrayInput />);
 
             // Open Posts List
-            fireEvent.click(await screen.findByText('Posts'));
+            userEvent.click(await screen.findByText('Posts'));
 
             await waitFor(() => {
                 expect(screen.queryAllByRole('checkbox')).toHaveLength(11);
             });
 
-            fireEvent.click(await screen.findByLabelText('Open'));
-            fireEvent.click(await screen.findByText('Sint...'));
+            userEvent.click(await screen.findByLabelText('Open'));
+            userEvent.click(await screen.findByText('Sint...'));
 
             await waitFor(
                 () => {
@@ -205,15 +210,15 @@ describe('<FilterButton />', () => {
                 { timeout: 10000 }
             );
 
-            fireEvent.click(screen.getByLabelText('Add filter'));
-            fireEvent.click(screen.getByText('Remove all filters'));
+            userEvent.click(screen.getByLabelText('Add filter'));
+            userEvent.click(screen.getByText('Remove all filters'));
 
             await waitFor(() => {
                 expect(screen.getAllByRole('checkbox')).toHaveLength(11);
             });
 
-            fireEvent.click(screen.getByLabelText('Open'));
-            fireEvent.click(screen.getByText('Sint...'));
+            userEvent.click(screen.getByLabelText('Open'));
+            userEvent.click(screen.getByText('Sint...'));
 
             await waitFor(() => {
                 expect(