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] does not accept slotProp: **placement** #547

Open
Erpix3lt opened this issue Aug 20, 2024 · 3 comments · May be fixed by #541
Open

[Select] does not accept slotProp: **placement** #547

Erpix3lt opened this issue Aug 20, 2024 · 3 comments · May be fixed by #541
Assignees
Labels
component: select This is the name of the generic UI component, not the React module! package: @mui/base (legacy)

Comments

@Erpix3lt
Copy link

Erpix3lt commented Aug 20, 2024

Steps to reproduce

Link to live example: https://stackblitz.com/edit/react-fpjpbc?file=Demo.tsx

import * as React from 'react';
import {
  Select as BaseSelect,
  SelectProps,
  selectClasses,
  SelectRootSlotProps,
} from '@mui/base/Select';
import { Option as BaseOption, optionClasses } from '@mui/base/Option';
import { styled } from '@mui/system';
import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded';

/* … */

Steps:

  1. Run the demo

Current behavior

After passing slotProps={{ popup: { placement: 'top' } }} to the select component, the placement of the popup cannot be modified.

Expected behavior

One should expect the popup to spawn in the given direction.

Context

As I do have another bug with the implementation of my modified select component, where I cannot retrieve the placement of the popup using the const popupContext = useContext(PopupContext); I do want to limit the opening behaviour to only open towards the bottom, in order to always apply correct styling.

Your environment

npx @mui/envinfo
  System:
    OS: macOS 14.6.1
  Binaries:
    Node: 21.6.1 - ~/.nvm/versions/node/v21.6.1/bin/node
    npm: 10.2.4 - ~/.nvm/versions/node/v21.6.1/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 127.0.6533.120
    Edge: Not Found
    Safari: 17.6
  npmPackages:
    @emotion/react: ^11.11.1 => 11.11.4
    @emotion/styled: ^11.11.0 => 11.11.5
    @mui/base: 5.0.0-beta.40 => 5.0.0-beta.40
    @mui/core-downloads-tracker:  5.16.7
    @mui/icons-material: 5.16.6 => 5.16.6
    @mui/material: 5.16.6 => 5.16.6
    @mui/private-theming:  5.16.6
    @mui/styled-engine:  5.16.6
    @mui/styles: 5.16.6 => 5.16.6
    @mui/system: 5.16.6 => 5.16.6
    @mui/types:  7.2.15
    @mui/utils: 5.16.6 => 5.16.6
    @types/react: ^18.2.20 => 18.3.3
    react: ^18.2.0 => 18.3.1
    react-dom: ^18.2.0 => 18.3.1
    typescript: ^5.0.0 => 5.5.3

Search keywords: Select, Popup

@Erpix3lt Erpix3lt added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Aug 20, 2024
@zannager zannager added component: select This is the name of the generic UI component, not the React module! package: base-ui labels Aug 20, 2024
@michaldudak
Copy link
Member

We're currently overhauling the Select component (#541). The revised implementation will be more customizable.

@michaldudak michaldudak assigned atomiks and unassigned michaldudak Aug 21, 2024
@michaldudak michaldudak removed the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Aug 21, 2024
@Erpix3lt
Copy link
Author

@michaldudak When can we expect the new implementation?

@michaldudak
Copy link
Member

The PR will be merged when it's done. We release alphas roughly every six weeks, but we don't guarantee that the API will be stable.
We tentatively plan to release the stable version of Base UI early next year.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
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.

4 participants