[Autocomplete] display inconsistent with other form controls

[blueshirts]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/s/pedantic-tamas-1kzrk5?file=/demo.js

Steps:

1. The example above shows that components inline with Autocomplete always get wrapped to a new line.
2. Place a component next to an Autocomplete and notice it always goes to the next line.

Current behavior 😯

Buttons and components that follow the Autocomplete get wrapped to the next line.

Expected behavior 🤔

I would expect if space allows that components would stay on the same line. For example if I would like to place a related button to the right of an Autocomplete it is always wrapped.

Context 🔦

I am trying to place a button to the right of the Autocomplete.

Your environment 🌎

npx @mui/envinfo

  System:
    OS: macOS 12.5
  Binaries:
    Node: 18.12.1 - ~/.nvm/versions/node/v18.12.1/bin/node
    Yarn: Not Found
    npm: 8.19.2 - ~/.nvm/versions/node/v18.12.1/bin/npm
  Browsers:
    Chrome: 108.0.5359.124
    Edge: Not Found
    Firefox: 108.0.1
    Safari: 15.6
  npmPackages:
    @emotion/react: ^11.10.5 => 11.10.5
    @emotion/styled: ^11.10.5 => 11.10.5
    @mui/base:  5.0.0-alpha.112
    @mui/core-downloads-tracker:  5.11.2
    @mui/icons-material: ^5.11.0 => 5.11.0
    @mui/material: ^5.11.1 => 5.11.2
    @mui/private-theming:  5.11.2
    @mui/styled-engine:  5.11.0
    @mui/system:  5.11.2
    @mui/types:  7.2.3
    @mui/utils:  5.11.2
    @types/react:  18.0.26
    react: 18.2.0 => 18.2.0
    react-dom: 18.2.0 => 18.2.0
    typescript:  4.9.4

[michaldudak]

I agree, there's an inconsistency in how different controls are rendered. We will consider unifying it in the next major version, as modifying it now would be a breaking change.

For a workaround, you can specify display: inline-block on the Autocomplete root (.MuiAutocomplete-root) or place it in a flex container.