[material-ui][Autocomplete] Current multiple select does not play well with text with ellipsis

[leonbloy]

Steps to reproduce

Link to live example: https://codesandbox.io/p/sandbox/sweet-platform-5x2k34?file=%2Fsrc%2FApp.js

Steps:

1. Make Autocomplete multiple render the selected values as joined text with no wrap and ellipsis (with css), as in the linked example
2. Narrow the viewport so that the component width is a bit wider or a bit narrow than the text

Video attached

Current behavior

The example shows the natural way to code a multiple Autocomplete with text in one line (no wrap) with ellipsis. But this does not play well with the way the internal layout is implemented in the component.

As shown in the video (and can be tested in the linked example) when the component is narrowed to a point where the text should still fit, an additional line (for the input) is appended. (In the example, I've styled the internal input with ligth green). The ellipsis appear too late, and even when it appears, the behavior is not the expected one. One wants that everything fits in one line.

The problem also manifests (perhaps less catastrophically) when we render chips (instead of text).

There seems to be two root causes here.

First and principal: a space a reserved for the input component always (see the light green zone), and a negative margin is placed in the label. This not only plays badly with the nowrap+ellipsis styling, it makes difficult (if not impossible) to get the desired behaviour: display just one line with ellipsis, taking all the available horizontal space. Perhaps the space for the input could be allocated only when the component is focused/active?

Second (less important) : an additional horizontal space is wasted, as assigned to the "clear" button (which is shown only on hover).

This issue is quite related to #20244 , which was closed (wrongly IMO) as duplicate of #19137 )

Expected behavior

No response

Context

No response

Your environment

npx @mui/envinfo

 System:
    OS: Windows 11 10.0.22621
  Binaries:
    Node: 18.18.2 - C:\devel\nodejs\node.EXE
    Yarn: Not Found
    npm: 9.8.1 - C:\devel\nodejs\npm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Chromium (120.0.2210.121)
  npmPackages:
    @emotion/react: ^11.10.0 => 11.11.3
    @emotion/styled: ^11.10.0 => 11.11.0
    @mui/base:  5.0.0-beta.30
    @mui/core-downloads-tracker:  5.15.3
    @mui/icons-material: ^5.8.4 => 5.15.3
    @mui/lab: ^5.0.0-alpha.88 => 5.0.0-alpha.159
    @mui/material: ^5.9.3 => 5.15.3
    @mui/private-theming:  5.15.3
    @mui/styled-engine:  5.15.3
    @mui/styles: ^5.9.3 => 5.15.3
    @mui/system: ^5.9.3 => 5.15.3
    @mui/types:  7.2.12
    @mui/utils: ^5.9.3 => 5.15.3
    @mui/x-date-pickers: ^6.4.0 => 6.18.7
    @types/react:  17.0.74
    react: ^17.0.2 => 17.0.2
    react-dom: ^17.0.2 => 17.0.2
    typescript:  5.3.3

Using Chrome 120, on Windows 11

Autocomplete2024-01-09.174447.mp4

Search keywords: autocomplete ellipsis wrapping

[leonbloy]

To be clear: I'd wish Autocomplete in multiple mode to display (at least when not active) the same as Select.

I find inconsistent that both Select and Autocomplete have a "multiple" mode, but the latter practically forces us to use chips ("tags").

In the multiple mode, Select has a nice default behaviour: the selected values are shown a text joined by commas, in a single line, without wrapping - with ellipsis if needed.

That behaviour is not available in Autocomplete (or at least I cannot figure how to attain it).

[ZeeshanTamboli]

@leonbloy I agree that consistency is important between the Select and Autocomplete components. Have you tested the solutions or workarounds mentioned in #19137?

[mj12albert]

@leonbloy You are right, the differences between Autocomplete and Select are because Autocomplete has to accommodate an input as well

That behaviour is not available in Autocomplete (or at least I cannot figure how to attain it).

You can use the renderTags prop to customize how the selected value(s) are displayed

I tried one from the issue linked to by @ZeeshanTamboli and it more or less works, here's a demo: https://stackblitz.com/edit/vite-material-ui-v5-mcve-lboyhm?file=src%2FApp.tsx

[mj12albert]

Duplicate of #19137