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][Joy] Fix forwarding listbox component prop #34172

Merged
merged 8 commits into from Sep 3, 2022

Conversation

siriwatknp
Copy link
Member

@siriwatknp siriwatknp commented Sep 2, 2022

closes #34164

Preview: https://deploy-preview-34172--material-ui.netlify.app/joy-ui/react-select/#grouped-options

Root cause

<Select componentsProps={{
  listbox: {
    component: 'div',
  },
}}>

By provided component: 'div' to the listbox slot, the div replace the SelectListbox slot instead of passing as as prop. That's why the styles are gone.

To fix this problem, the component must be specified at the end to PopperUnstyled and grab the final component from listbox slot props (because it could be a callback) to pass it as as prop.

A visual regression test is added https://app.argos-ci.com/mui/material-ui/builds/4844


@siriwatknp siriwatknp added docs Improvements or additions to the documentation package: joy-ui Specific to @mui/joy labels Sep 2, 2022
@mui-bot
Copy link

mui-bot commented Sep 2, 2022

Details of bundle changes

Generated by 🚫 dangerJS against cfd8090

@siriwatknp siriwatknp merged commit 0a66a26 into mui:master Sep 3, 2022
daniel-rabe pushed a commit to daniel-rabe/material-ui that referenced this pull request Nov 29, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
docs Improvements or additions to the documentation package: joy-ui Specific to @mui/joy
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[docs] Improper styling of Joy Select demo
2 participants