-
-
Notifications
You must be signed in to change notification settings - Fork 31.6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[material-ui][Autocomplete] Selected Option is hidden when it is Focused #42173
Comments
Do you mean that the selected option should appear at the top when you re-open the autocomplete dropdown? |
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. |
@yassinmars The suggested method works. Thank You for the info. |
👋 Thanks for using our open-source projects! We use GitHub issues exclusively as a bug and feature requests tracker, however, 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. |
Thanks @yassinmars for looking into this 🙌 |
Steps to reproduce
Link to live example: https://stackblitz.com/edit/react-j8inhi?file=index.tsx
Steps:
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
Search keywords: I have searched the existing issues
The text was updated successfully, but these errors were encountered: