AutoComplete Selected Option is hidden when it is Focused

[SunilKumar33]

Steps to reproduce

Link to live example: https://stackblitz.com/edit/react-j8inhi?file=index.tsx

Steps:

1. Select any long option from the options list(eg: The Lord of the Rings: The Fellowship of the Ring).
2. After Selecting the option, click outside of the AutoComplete component.
3. Again revisit the AutoComplete component by clicking on arrow icon or inside the textfield, Then it will be Focused. Only for the first time we can see that the initial text is hidden but if we try to open again the initial text is visible.

Current behavior

For the First Time I am getting issue has in screenshot:

Expected behavior

Context

When any long option is selected and when it is focused the selected option should be visible from start of the option not from the end.

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: I have searched the existing issues

[brijeshb42]

Do you mean that the selected option should appear at the top when you re-open the autocomplete dropdown? What you are seeing is the expected behaviour right now where the list is opened with the selected value being auto focussed.

[yassinmars]

To address the visibility issue of the selected option in the AutoComplete component upon focus, I propose a direct adjustment to the component's handling of input focus to ensure the text starts from the beginning. I've tested this solution in the provided StackBlitz example, modifying the component's input handling to reset the scroll position on focus. This approach consistently shows the full selected text without cutting off the start, enhancing usability and ensuring the content is fully visible upon re-entry. Here's a code snippet that might be included:

This method ensures the selected text is always visible from the start, potentially resolving the issue without needing additional modifications or workarounds.

[SunilKumar33]

@yassinmars The suggested method works. Thank You for the info.

[github-actions[bot]]

👋 Thanks for using our open-source projects!

We use GitHub issues exclusively as a bug and feature requests tracker, however, this issue appears to be a support request.

For support with Material UI please check out https://mui.com/material-ui/getting-started/support/. Thanks!

If you have a question on Stack Overflow, you are welcome to link to it here, it might help others. If your issue is subsequently confirmed as a bug, and the report follows the issue template, it can be reopened.

[mj12albert]

Thanks @yassinmars for looking into this 🙌