[Autocomplete] Fix navigation issue on mouse hover (#35196)

mui · Apr 4, 2023 · 6776cb2 · 6776cb2
1 parent d24ac60
commit 6776cb2
Show file tree

Hide file tree

Showing 6 changed files with 90 additions and 9 deletions.
diff --git a/packages/mui-base/src/useAutocomplete/useAutocomplete.js b/packages/mui-base/src/useAutocomplete/useAutocomplete.js
@@ -965,12 +965,15 @@ export default function useAutocomplete(props) {
     }
   };
 
-  const handleOptionMouseOver = (event) => {
-    setHighlightedIndex({
-      event,
-      index: Number(event.currentTarget.getAttribute('data-option-index')),
-      reason: 'mouse',
-    });
+  const handleOptionMouseMove = (event) => {
+    const index = Number(event.currentTarget.getAttribute('data-option-index'));
+    if (highlightedIndexRef.current !== index) {
+      setHighlightedIndex({
+        event,
+        index,
+        reason: 'mouse',
+      });
+    }
   };
 
   const handleOptionTouchStart = (event) => {
@@ -1144,7 +1147,7 @@ export default function useAutocomplete(props) {
         tabIndex: -1,
         role: 'option',
         id: `${id}-option-${index}`,
-        onMouseOver: handleOptionMouseOver,
+        onMouseMove: handleOptionMouseMove,
         onClick: handleOptionClick,
         onTouchStart: handleOptionTouchStart,
         'data-option-index': index,

diff --git a/packages/mui-joy/src/Autocomplete/Autocomplete.test.tsx b/packages/mui-joy/src/Autocomplete/Autocomplete.test.tsx
@@ -2049,7 +2049,7 @@ describe('Joy <Autocomplete />', () => {
         <Autocomplete onHighlightChange={handleHighlightChange} options={options} open autoFocus />,
       );
       const firstOption = getAllByRole('option')[0];
-      fireEvent.mouseOver(firstOption);
+      fireEvent.mouseMove(firstOption);
       expect(handleHighlightChange.callCount).to.equal(
         // FIXME: highlighted index implementation should be implemented using React not the DOM.
         React.version.startsWith('18') ? 4 : 3,

diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.test.js b/packages/mui-material/src/Autocomplete/Autocomplete.test.js
@@ -2520,7 +2520,7 @@ describe('<Autocomplete />', () => {
         />,
       );
       const firstOption = getAllByRole('option')[0];
-      fireEvent.mouseOver(firstOption);
+      fireEvent.mouseMove(firstOption);
       expect(handleHighlightChange.callCount).to.equal(
         // FIXME: highlighted index implementation should be implemented using React not the DOM.
         React.version.startsWith('18') ? 4 : 3,

diff --git a/test/e2e/fixtures/Autocomplete/HoverJoyAutocomplete.tsx b/test/e2e/fixtures/Autocomplete/HoverJoyAutocomplete.tsx
@@ -0,0 +1,15 @@
+import * as React from 'react';
+import Autocomplete from '@mui/joy/Autocomplete';
+
+function HoverJoyAutocomplete() {
+  return (
+    <Autocomplete
+      open
+      options={['one', 'two', 'three', 'four', 'five']}
+      sx={{ width: 300 }}
+      slotProps={{ listbox: { sx: { height: '100px' } } }}
+    />
+  );
+}
+
+export default HoverJoyAutocomplete;
diff --git a/test/e2e/fixtures/Autocomplete/HoverMaterialAutocomplete.tsx b/test/e2e/fixtures/Autocomplete/HoverMaterialAutocomplete.tsx
@@ -0,0 +1,17 @@
+import * as React from 'react';
+import Autocomplete from '@mui/material/Autocomplete';
+import TextField from '@mui/material/TextField';
+
+function HoverMaterialAutocomplete() {
+  return (
+    <Autocomplete
+      open
+      options={['one', 'two', 'three', 'four', 'five']}
+      sx={{ width: 300 }}
+      ListboxProps={{ sx: { height: '100px' } }}
+      renderInput={(params) => <TextField {...params} />}
+    />
+  );
+}
+
+export default HoverMaterialAutocomplete;
diff --git a/test/e2e/index.test.ts b/test/e2e/index.test.ts
@@ -193,6 +193,52 @@ describe('e2e', () => {
     });
   });
 
+  describe('<Autocomplete/>', () => {
+    it('[Material Autocomplete] should highlight correct option when initial navigation through options starts from mouse move', async () => {
+      await renderFixture('Autocomplete/HoverMaterialAutocomplete');
+
+      const combobox = (await screen.getByRole('combobox'))!;
+      await combobox.click();
+
+      const firstOption = (await screen.getByText('one'))!;
+
+      const dimensions = (await firstOption.boundingBox())!;
+
+      await page.mouse.move(dimensions.x + 10, dimensions.y + 10); // moves to 1st option
+      await page.keyboard.down('ArrowDown'); // moves to 2nd option
+      await page.keyboard.down('ArrowDown'); // moves to 3rd option
+      await page.keyboard.down('ArrowDown'); // moves to 4th option
+
+      const listbox = (await screen.getByRole('listbox'))!;
+      const focusedOption = (await listbox.$('.Mui-focused'))!;
+      const focusedOptionText = await focusedOption.innerHTML();
+
+      expect(focusedOptionText).to.equal('four');
+    });
+
+    it('[Joy Autocomplete] should highlight correct option when initial navigation through options starts from mouse move', async () => {
+      await renderFixture('Autocomplete/HoverJoyAutocomplete');
+
+      const combobox = (await screen.getByRole('combobox'))!;
+      await combobox.click();
+
+      const firstOption = (await screen.getByText('one'))!;
+
+      const dimensions = (await firstOption.boundingBox())!;
+
+      await page.mouse.move(dimensions.x + 10, dimensions.y + 10); // moves to 1st option
+      await page.keyboard.down('ArrowDown'); // moves to 2nd option
+      await page.keyboard.down('ArrowDown'); // moves to 3rd option
+      await page.keyboard.down('ArrowDown'); // moves to 4th option
+
+      const listbox = (await screen.getByRole('listbox'))!;
+      const focusedOption = (await listbox.$('.Joy-focused'))!;
+      const focusedOptionText = await focusedOption.innerHTML();
+
+      expect(focusedOptionText).to.equal('four');
+    });
+  });
+
   describe('<TextareaAutosize />', () => {
     // https://github.com/mui/material-ui/issues/32640
     it('should handle suspense without error', async () => {