[Autocomplete] Fix list scrolls to the top when new data is added on touch devices

[SaidMarar]

closes: #36212

The reason it is working on desktop is because when we mouseover an option we update highlightedIndex in handleOptionMouseOver , However, on mobile, the index is not updated when we touch the option, which results in the index remaining at -1 and causing the list to scroll to the top

before: https://codesandbox.io/s/mui-autocomplete-before-tmnvsm
after: https://codesandbox.io/s/mui-autocomplete-after-q32885

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

[mui-bot]

Netlify deploy preview

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

Bundle size report

Details of bundle changes

Generated by 🚫 dangerJS against 7983071

[ZeeshanTamboli]

In the preview package CodeSandbox of this PR, the scrollbar is still resetting in mobile view - https://codesandbox.io/s/mui-autocomplete-after-silyqj

[SaidMarar]

In the preview package CodeSandbox of this PR, the scrollbar is still resetting in mobile view - https://codesandbox.io/s/mui-autocomplete-after-silyqj

@ZeeshanTamboli Thanks, I just updated the dependencies, you can check the same link.

[ZeeshanTamboli]

In the preview package CodeSandbox of this PR, the scrollbar is still resetting in mobile view - https://codesandbox.io/s/mui-autocomplete-after-silyqj

@ZeeshanTamboli Thanks, I just updated the dependencies, you can check the same link.

@SaidMarar I am still not able to see it fixed in https://codesandbox.io/s/mui-autocomplete-after-silyqj.

[SaidMarar]

@ZeeshanTamboli Did you tested it in mobile simulator using the touch pointer to scroll ? If yes, are you observing the same behavior of resting scroll to the top ?

[ZeeshanTamboli]

@ZeeshanTamboli Did you tested it in mobile simulator using the touch pointer to scroll ? If yes, are you observing the same behavior of resting scroll to the top ?

I didn't test in mobile simulator but in desktop browser in mobile view and saw it's still resetting. It has the touch pointer.

[SaidMarar]

@ZeeshanTamboli I tested it in both, could you please check the video. I can make another for browser, if i get some time.

Upload.from.GitHub.for.iOS.MOV

[SaidMarar]

An example on mobile view:

[ZeeshanTamboli]

Okay, I checked on mobile instead and it works. I don't know why it didn't work in mobile device mode in desktop browser:

Screen.Recording.-.1.March.2023.mp4

[SaidMarar]

Okay, I checked on mobile instead and it works. I don't know why it didn't work in mobile device mode in desktop browser:

Ah I see ! It is because you are using the wheel to scroll and it is not the case in mobile, you need to scroll using the touch pointer. (this is the fix we did we save the option on touchStart in mobile. For desktop we already have mouseOver)

[SaidMarar]

@ZeeshanTamboli just updated, thank you for reviewing this 👍

[ZeeshanTamboli]

Looks good!