[Autocomplete] Long text in list item is being cut off

[haze9greg]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

Currently when there is long text for the list items, the text extends out of the menu and is cut off. There should be an option for the text to wrap and be fully visible. An alternative would be if the overflow text would display an ellipsis, and hover title could be seen.

This is somewhat possible with the help of react-window, but then the list is not accessible by keyboard.

Examples 🌈

The text should wrap (or overflow:ellipsis with a hover title) and be fully accessible by keyboard.

Motivation 🔦

My UX team and I are developing fully accessible sites and webapps with complex form elements. Some of our autocompletes may contain lists with thousands of items. It's crucial for these components to be as user friendly as possible.

[AnisTigrini]

Hi there, pretty new to open source project but would be happy to help :), let me know if this would be a good first issue @danilo-leal. Worked on something similar in my job, had to add a prop for overflow.

I kind of see what you mean @haze0028 You basically want to get rid of the behavion of the list item text being wrapped up in two lines is that correct?

[danilo-leal]

@AnisTigrini feel free to open a PR with the fix! :)

[haze9greg]

Hi there, pretty new to open source project but would be happy to help :), let me know if this would be a good first issue @danilo-leal. Worked on something similar in my job, had to add a prop for overflow.

I kind of see what you mean @haze0028 You basically want to get rid of the behavion of the list item text being wrapped up in two lines is that correct?

I want the text to wrap if it's long, so the list items are capable of being different heights. Otherwise the overflow should show as ellipsis, with a hover popup displaying the full text.

[CarlosAmaral]

This would be awesome to have it fixed!

[ZeeshanTamboli]

The long list item isn’t cut off in the latest version: https://stackblitz.com/edit/react-75zs1cfq?file=Demo.tsx. Can anyone reproduce it? It might have been fixed earlier.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@haze9greg How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.