React MUI multiple select overflow one line display the ellipsis - select

Question

I developed a multiple select component that have checkbox can select all and search. The component used Autocomplete and TextField.
I hope the select input can display the ellipsis when selected overflow one line. I set styles but it didn't work. It display all selected options in input.
When I click the select input it can't wake up the options drop-down box If I set overflow scroll and maxHeight .result is I need click twice .Probably because of the cursor position.

Answer 1

I added this to the AutoComplete and it worked for me.
sx={{
"& > .MuiAutocomplete-root .MuiFormControl-root .MuiInputBase-root": {flexWrap: "nowrap"}
}}
renderTags={
(list) => {
let displayList = list.map((item) => item.label).join(' • ');
// Render <Typography> elements instead of <Chip> components. Residence 1, Version 1 • Residence 1, Version 5...
return <Typography
noWrap={true}
sx={{ pl: 1 }}
color="textPrimary"
>
{displayList}
</Typography>;
},
}