[material-ui][Autocomplete] Improve design when there's a start adornment for small autocomplete

[TahaRhidouani]

Fix #41780

Changes

Makes the wrap behavior of the autocomplete the same as a textfield.

Before:

After:

Note: The flex: wrap is still used when the multiple prop is enabled on the autocomplete to wrap the chips over multiple lines.

Prevent the clear icon from colliding over the input text when hovering

Before:

After:

[mui-bot]

Netlify deploy preview

https://deploy-preview-41781--material-ui.netlify.app/

Bundle size report

Details of bundle changes (Toolpad) Details of bundle changes

Generated by :no_entry_sign: dangerJS against b958beafb0471b2682ce3e98c716745405aadc0c

[DiegoAndai]

Hey @ZeeshanTamboli and @TahaRhidouani!

So, what's the optimal choice here?

I'm not against a multiple class, but it should be applied to the root and not inputRoot. Applying it to inputRoot is helpful for this use case, but it would be inconsistent. So, if we were to use classes, the correct styleOverrides usage would be

const theme = createTheme({
  components: {
    MuiAutocomplete: {
      styleOverrides: {
        multiple: {
          [`& .${autocompleteClasses.inputRoot}`]: {
              flexWrap: 'no-wrap',
            },
        },
      },
    },
  },
});

Which is similar to what we would have by using a theme variant.

So, to answer the question, both using classes or theme variants are valid options.

The ideal path IMO is to use theme variants in this PR, and have a separate PR adding the multiple class.

[ZeeshanTamboli]

@DiegoAndai Since this PR has been open for a while, I made the changes myself to use variants. I've also included a visual regression test - https://app.argos-ci.com/mui/material-ui/builds/27693/89392040. Could you review?