[material-ui][Autocomplete] Fix Autocomplete crashing if ownerState i…

…s used in styleOverrides (#43994)
mui · Oct 16, 2024 · 010de45 · 010de45
1 parent e3ec0c7
commit 010de45
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 4 deletions.
diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.js b/packages/mui-material/src/Autocomplete/Autocomplete.js
@@ -544,7 +544,6 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) {
 
   const externalForwardedProps = {
     slots: {
-      listbox: ListboxComponentProp,
       paper: PaperComponentProp,
       popper: PopperComponentProp,
       ...slots,
@@ -558,7 +557,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) {
   };
 
   const [ListboxSlot, listboxProps] = useSlot('listbox', {
-    elementType: 'ul',
+    elementType: AutocompleteListbox,
     externalForwardedProps,
     ownerState,
     className: classes.listbox,
@@ -682,7 +681,9 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) {
   let autocompletePopper = null;
   if (groupedOptions.length > 0) {
     autocompletePopper = renderAutocompletePopperChildren(
-      <AutocompleteListbox as={ListboxSlot} {...listboxProps}>
+      // TODO v7: remove `as` prop and move ListboxComponentProp to externalForwardedProps or remove ListboxComponentProp entirely
+      // https://github.com/mui/material-ui/pull/43994#issuecomment-2401945800
+      <ListboxSlot as={ListboxComponentProp} {...listboxProps}>
         {groupedOptions.map((option, index) => {
           if (groupBy) {
             return renderGroup({
@@ -695,7 +696,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) {
           }
           return renderListOption(option, index);
         })}
-      </AutocompleteListbox>,
+      </ListboxSlot>,
     );
   } else if (loading && groupedOptions.length === 0) {
     autocompletePopper = renderAutocompletePopperChildren(

diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.test.js b/packages/mui-material/src/Autocomplete/Autocomplete.test.js
@@ -130,6 +130,34 @@ describe('<Autocomplete />', () => {
     });
   });
 
+  it('should not throw error when accessing ownerState in styleOverrides', () => {
+    const theme = createTheme({
+      components: {
+        MuiAutocomplete: {
+          styleOverrides: {
+            root: ({ ownerState }) => {
+              return {
+                outlineColor: ownerState.size === 'small' ? 'magenta' : 'crimson',
+              };
+            },
+          },
+        },
+      },
+    });
+
+    expect(() => {
+      render(
+        <ThemeProvider theme={theme}>
+          <Autocomplete
+            open
+            options={['one', 'two', 'three']}
+            renderInput={(params) => <TextField {...params} />}
+          />
+        </ThemeProvider>,
+      );
+    }).not.to.throw();
+  });
+
   describe('combobox', () => {
     it('should clear the input when blur', () => {
       const { getByRole } = render(