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

[Autocomplete] Use ul element for the listbox #44422

Merged
merged 2 commits into from
Nov 15, 2024

Conversation

DiegoAndai
Copy link
Member

@DiegoAndai DiegoAndai commented Nov 15, 2024

Closes #44264

Explanation

The ul element was lost in this PR: #43994. Previously, it was provided via the as prop:

const [ListboxSlot, listboxProps] = useSlot('listbox', {
elementType: 'ul',

<AutocompleteListbox as={ListboxSlot} {...listboxProps}>

But after #43994 fix, we failed to maintain it:

const AutocompleteListbox = styled('div', {

const [ListboxSlot, listboxProps] = useSlot('listbox', {
elementType: AutocompleteListbox,

<ListboxSlot as={ListboxComponentProp} {...listboxProps}>

Solution

This PR brings it back by setting AutocompleteListbox's element to ul, and adds a test for it.

v5: https://codesandbox.io/p/sandbox/pr-44422-v5-x2ff5z
Before: https://codesandbox.io/p/sandbox/pr-44422-before-l66t9p
After: https://codesandbox.io/p/sandbox/pr-44422-after-cx66k3

@DiegoAndai DiegoAndai added package: material-ui Specific to @mui/material component: autocomplete This is the name of the generic UI component, not the React module! labels Nov 15, 2024
@DiegoAndai DiegoAndai self-assigned this Nov 15, 2024
@mui-bot
Copy link

mui-bot commented Nov 15, 2024

Netlify deploy preview

https://deploy-preview-44422--material-ui.netlify.app/

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against 0d2d298

@DiegoAndai DiegoAndai merged commit e8e4b79 into mui:master Nov 15, 2024
21 checks passed
@DiegoAndai DiegoAndai deleted the autocomplete-listbox-element branch November 15, 2024 15:25
@oliviertassinari oliviertassinari added bug 🐛 Something doesn't work regression A bug, but worse labels Nov 15, 2024
@oliviertassinari oliviertassinari changed the title [material-ui][Autocomplete] Use ul element for the listbox [Autocomplete] Use ul element for the listbox Nov 15, 2024
@rathpc
Copy link

rathpc commented Nov 19, 2024

@aarongarciah any idea when this will be part of a release (6.1.8 perhaps?)

@aarongarciah
Copy link
Member

@rathpc we'll probably release 6.2.0 this week and it'll contain this change.

@rathpc
Copy link

rathpc commented Nov 19, 2024

@rathpc we'll probably release 6.2.0 this week and it'll contain this change.

Perfect, thank you for the fast reply!!

@ArmandRedgate
Copy link

ArmandRedgate commented Nov 20, 2024

A related issue that may conflict with this:

#42782

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: autocomplete This is the name of the generic UI component, not the React module! package: material-ui Specific to @mui/material regression A bug, but worse
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Autocomplete] MuiAutocomplete listbox is no longer a <ul> element
6 participants