[Autocomplete] Fix navigation issue on mouse hover

[sai6855]

Fixes #30178

Problem: handleOptionMouseOver from below file is expected to run only when mouse is over an option but the function is called even when dom updates happening in backgroud when listbox is scrolled.

https://github.com/mui/material-ui/blob/master/packages/mui-base/src/AutocompleteUnstyled/useAutocomplete.js.

I learnt this from downshift code base.

https://github.com/downshift-js/downshift/blob/4c3d3eab8a5d1a826f792d0b8d1302715400d7ed/src/downshift.js#L923

Solution: instead of using onMouseOver event, i used onMouseMove event as onMouseMove runs only when mouse moves.

Just FYI: even v4 autocomplete also has same issue

Before: https://www.loom.com/share/81bc73d696a84d87acc2919018350244

After: https://www.loom.com/share/cdb34134e21643c3a1ab04c730cb4361

• I have followed (at least) the PR section of the contributing guide.

[mui-bot]

Netlify deploy preview

https://deploy-preview-35196--material-ui.netlify.app/

Bundle size report

Details of bundle changes

Generated by 🚫 dangerJS against 953fa54

[sai6855]

@ZeeshanTamboli can you review this pr

[mnajdova]

The test passes on master too, it's probably not testing exactly what is needed.

[sai6855]

@ZeeshanTamboli i'm having a trouble to write the test case for the #35141 , can you please help me on how to write the test case, the test i've written in this PR is also passing in master branch.

To make things easy for you, i'm attaching video of the bug.

In the video you can see, after pulpfiction option Godfather option is getting highlighted ideally Lord of the rings option should be highlighted.

Screen.Recording.2022-11-29.at.10.07.43.PM.mov

[ZeeshanTamboli]

@sai6855 Even I am not able to write a failing test case. Maybe @michaldudak or @mnajdova can help.

However, your fix looks good to me. Also, your issue is a duplicate of #30178. So I updated the PR description to fix #30178 and marked #35141 as a duplicate.

[sai6855]

Thanks @ZeeshanTamboli for taking a look, let's wait for team to help us out.

[sai6855]

@michaldudak can you help me to write failing test case in master

[michaldudak]

I can't think of a way to unit test this either, as it depends on having a mouse cursor.
It may be possible to use the e2e test for this (/test/e2e/fixtures), but I'm not 100% sure.

As for the new behavior, it seems to be consistent with the native select tags. We will likely change this in the future, so hovering over an item won't highlight it, but this will do for now.

[sai6855]

@ZeeshanTamboli @michaldudak @mnajdova added test in e2e fixtures. Tested newly added test in master branch it was failing

[ZeeshanTamboli]

Nice work @sai6855. It looks good to me. But I'll let @michaldudak review it before merging.

Addressed

[siriwatknp]

👍 I love this fix! I encountered this bug multiple times before.