As some background
With Material UI Multiple Select, you can truncate the value shown after selection, rather than going to another line (by setting the renderValue to .join the selected options, which gives the functionality of "option A, option B, ..."). The important piece here is that it adds the "..." when the selected options are too long to fit on one line, rather than expanding to the next line.
For example, the following works with Multiple Select:
// Truncated value (I DO want this, for `Autocomplete`)
<Select
labelId="demo-mutiple-name-label"
id="demo-mutiple-name"
multiple
value={personName}
onChange={handleChange}
input={<Input />}
renderValue={selected => selected.join(", ")}
MenuProps={MenuProps}
>
{names.map(name => (
<MenuItem
key={name}
value={name}
style={getStyles(name, personName, theme)}
>
{name}
</MenuItem>
))}
</Select>
// – VERUS –
// chips that wrap to multiple lines (DON'T want this)
<Select
labelId="demo-mutiple-chip-label"
id="demo-mutiple-chip"
multiple
value={personName}
onChange={handleChange}
input={<Input id="select-multiple-chip" />}
renderValue={selected => (
<div className={classes.chips}>
{selected.map(value => (
<Chip key={value} label={value} className={classes.chip} />
))}
</div>
)}
MenuProps={MenuProps}
>
{names.map(name => (
<MenuItem
key={name}
value={name}
style={getStyles(name, personName, theme)}
>
{name}
</MenuItem>
))}
</Select>
Demo of Multiple Selects
I'm trying to replicate the functionality above with the Material UI Autocomplete
but there doesn't seem to be an obvious way to do so.
I've tried several approaches:
<Autocomplete
multiple
id="tags-standard"
options={top100Films}
getOptionLabel={option => option.title}
defaultValue={[top100Films[13]]}
renderTags={selected => {
console.log("selected = ", selected);
let renderTagsValue = selected
.map(function(elem) {
return elem.title;
})
.join(", ");
return (
<Typography noWrap={true} color="textPrimary">
{renderTagsValue}
</Typography>
);
}}
renderInput={params => (
<TextField
{...params}
variant="standard"
label="Multiple values"
placeholder="Favorites"
/>
)}
/>
renderTags– Since renderValue is not an option forAutocomplete's, I added a.jointo therenderTags, but that only creates a long string that continues to wrap to the next linedisableListWrap– I hoped this would prevent anything from wrapping to the next line, but it still wraps to the next linelimitTags– This doesn't work since tags can be variable lengths. 1, 2, or 3 may fit on a line depending on which tag is selectedrenderTagsANDTypography– same as #1, plus returning aTypographyelement withnoWrapset totrue(this is close but still not right
My closest attempt is #4, but it's still not right. It truncates, but still wraps the placeholder text to the next line, making the textbox's height expand vertically, rather than remaining fixed (like the demo with Multiple Select).
