Merge pull request #21096 from backstage/philipph/mui5-fix-menuitem

Remove `button` prop from used MaterialUI `MenuItem` component

.changeset/odd-scissors-eat.md

@@ -0,0 +1,9 @@
+---
+'@backstage/plugin-catalog-react': patch
+'@backstage/plugin-cost-insights': patch
+'@backstage/plugin-scaffolder': patch
+'@backstage/plugin-playlist': patch
+'@backstage/plugin-bazaar': patch
+---
+
+Remove `button` prop from used MaterialUI `MenuItem` component fixing incompatibility with MaterialUI v5.

plugins/bazaar/src/components/InputSelector/InputSelector.tsx

@@ -60,7 +60,7 @@ export const InputSelector = ({ name, options, control, error }: Props) => {
           >
             {options.map(option => {
               return (
-                <MenuItem button key={option} value={option}>
+                <MenuItem key={option} value={option}>
                   {option}
                 </MenuItem>
               );

plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx

@@ -243,7 +243,6 @@ export const UserListPicker = (props: UserListPickerProps) => {
                 <MenuItem
                   role="none presentation"
                   key={item.id}
-                  button
                   divider
                   onClick={() => setSelectedUserFilter(item.id)}
                   selected={item.id === filters.user?.value}

plugins/cost-insights/src/components/CostInsightsNavigation/CostInsightsNavigation.tsx

@@ -44,7 +44,6 @@ const NavigationMenuItem = ({ navigation, icon, title }: NavigationItem) => {
   const [, setScroll] = useScroll();
   return (
     <MenuItem
-      button
       data-testid={`menu-item-${navigation}`}
       className={classes.menuItem}
       onClick={() => setScroll(navigation)}

plugins/playlist/src/components/PersonalListPicker/PersonalListPicker.tsx

@@ -270,7 +270,6 @@ export const PersonalListPicker = () => {
                 <MenuItem
                   role="none presentation"
                   key={item.id}
-                  button
                   divider
                   onClick={() => setSelectedPersonalFilter(item.id)}
                   selected={item.id === selectedPersonalFilter}

plugins/scaffolder/src/components/ListTasksPage/OwnerListPicker.tsx

@@ -111,7 +111,6 @@ export const OwnerListPicker = (props: {
               {group.items.map(item => (
                 <MenuItem
                   key={item.id}
-                  button
                   divider
                   ContainerProps={{ role: 'menuitem' }}
                   onClick={() => onSelectOwner(item.id as 'owned' | 'all')}