Making Material-UI Autocomplete break long words to fit layout

Question

It is the first time that I am dealing with the Material-UI autocomplete. In my case I use it with usernames, which can only have a certain length but it might not fit into the autocomplete view, due to restricted size.

As you can see in the sandbox and image, the words are cut off if they are too long.

So therefore I'm looking for a way to expand the dropdown's width, when it is clicked, depending on the options string length or implement a word-break for too long words.

As it can be seen in the sandbox, I tried out using different ways to make the text overflow or break words into a new line, but unsuccessful until now.

Sandbox-Example

Can anyone please guide me on how to solve this issue?

Answer 1

You can make a line break with this:

<Autocomplete
  ...
  componentsProps={{ paper: { sx: { wordBreak: 'break-word' } } }}
/>

Result of wordBreak: 'break-word'