[Select] placeholder not working with multiple selection

[loudjanilef]

Steps to reproduce

Link to live example: CodeSandbox

Steps:

1. Add a Select component with multiple prop set to true
2. Add the placeholder that should be displayed when no items are picked

Current behavior

If the Select has the multiple prop set to true, the placeholder will never be displayed

Expected behavior

The placeholder should be displayed when there are no items picked

Context

Is this behavior on purpose ? Should I manage the placeholder manually with the multiple flag ?
This seems very similar to this issue from joy-ui
Maybe the same fix can be done here ?

Your environment

npx @mui/envinfo

 System:
    OS: Windows 10 10.0.19045
  Binaries:
    Node: 20.9.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.4.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: Not Found
  Browsers:
    Chrome: Not Found
    Edge: Chromium (122.0.2365.66)
    Firefox: 123.0
  npmPackages:
    @mui/base: ^5.0.0-beta.37 => 5.0.0-beta.37
    @mui/types:  7.2.13
    @mui/utils:  5.15.11
    @types/react: ^18 => 18.2.58
    react: ^18 => 18.2.0
    react-dom: ^18 => 18.2.0
    typescript: ^5 => 5.3.3

Search keywords: Select multiple placeholder

[michaldudak]

Thanks for reporting this bug.

We are currently redesigning Base UI components (with a different customization API), and we should tackle the Select around June (see https://github.com/orgs/mui/projects/1/views/13). We'll work on fixing this then.

[divramhit]

I don't if this can help in the meantime, I used the default docs for base ui to create the Select/Multi Select then for the Button
part, I did something as such:

const Button = React.forwardRef(function Button<
  TValue extends {},
  Multiple extends boolean
>(
  props: SelectRootSlotProps<TValue, Multiple>,
  ref: React.ForwardedRef<HTMLButtonElement>
) {
	const { ownerState, ...other } = props;
	const multiple = ownerState?.multiple;
	const placeholder = ownerState?.placeholder
	return (
		<button
			type='button'
			{...other}
			ref={ref}
		>
			{other.children}
			{multiple ? (
				<>
					{ placeholder ? (<span>{placeholder}</span>) : (<span>&nbsp;</span>) }
				</>
				
			) : null}
			<ArrowDropDownIcon />
		</button>
	)
})

Idk if this is the correct way to use ownerState or not, but in my case it worked.