Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Select] placeholder not working with multiple selection #155

Open
loudjanilef opened this issue Mar 3, 2024 · 3 comments
Open

[Select] placeholder not working with multiple selection #155

loudjanilef opened this issue Mar 3, 2024 · 3 comments
Labels
bug 🐛 Something doesn't work component: select This is the name of the generic UI component, not the React module! package: @mui/base (legacy)

Comments

@loudjanilef
Copy link

loudjanilef commented Mar 3, 2024

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

@loudjanilef loudjanilef added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Mar 3, 2024
@danilo-leal danilo-leal added the component: select This is the name of the generic UI component, not the React module! label Mar 6, 2024
@michaldudak
Copy link
Member

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.

@michaldudak michaldudak added bug 🐛 Something doesn't work and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Apr 19, 2024
@divramhit
Copy link

divramhit commented May 19, 2024

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.

@KirankumarAmbati
Copy link

@michaldudak please can you assign this to me. I raised a PR with the fix.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work component: select This is the name of the generic UI component, not the React module! package: @mui/base (legacy)
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants