[button group] Fix children remounting when siblings are added, removed or reordered

packages/mui-material/src/ButtonGroup/ButtonGroup.js

@@ -337,7 +337,7 @@ const ButtonGroup = React.forwardRef(function ButtonGroup(inProps, ref) {
         {validChildren.map((child, index) => {
           return (
             <ButtonGroupButtonContext.Provider
-              key={index}
+              key={child.key}
               value={getButtonPositionClassName(index)}
             >
               {child}

packages/mui-material/src/ButtonGroup/ButtonGroup.test.js

@@ -1,5 +1,11 @@
 import { describe, it, expect } from 'vitest';
-import { createRenderer, screen, simulateKeyboardDevice, isJsdom } from '@mui/internal-test-utils';
+import {
+  act,
+  createRenderer,
+  screen,
+  simulateKeyboardDevice,
+  isJsdom,
+} from '@mui/internal-test-utils';
 import ButtonGroup, { buttonGroupClasses as classes } from '@mui/material/ButtonGroup';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import Button, { buttonClasses } from '@mui/material/Button';
@@ -364,5 +370,27 @@ describe('<ButtonGroup />', () => {
       expect(button).not.to.have.class(classes.middleButton);
       expect(button).not.to.have.class(classes.lastButton);
     });
+
+    it('should keep a button mounted when the button before it is removed', async () => {
+      function Toolbar({ showUndo }) {
+        return (
+          <ButtonGroup>
+            {showUndo && <Button>Undo</Button>}
+            <Button>Save</Button>
+            <Button>Delete</Button>
+          </ButtonGroup>
+        );
+      }
+      const { setProps } = render(<Toolbar showUndo />);
+      const saveButton = screen.getByRole('button', { name: 'Save' });
+      await act(async () => {
+        saveButton.focus();
+      });
+
+      setProps({ showUndo: false });
+
+      expect(screen.getByRole('button', { name: 'Save' })).to.equal(saveButton);
+      expect(saveButton).toHaveFocus();
+    });
   });
 });

packages/mui-material/src/ToggleButtonGroup/ToggleButtonGroup.js

@@ -262,7 +262,7 @@ const ToggleButtonGroup = React.forwardRef(function ToggleButtonGroup(inProps, r
 
             return (
               <ToggleButtonGroupButtonContext.Provider
-                key={index}
+                key={child.key}
                 value={getButtonPositionClassName(index)}
               >
                 {child}

packages/mui-material/src/ToggleButtonGroup/ToggleButtonGroup.test.js

@@ -2,7 +2,7 @@ import { describe, it, expect } from 'vitest';
 import * as React from 'react';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 import { spy } from 'sinon';
-import { createRenderer, screen } from '@mui/internal-test-utils';
+import { act, createRenderer, screen } from '@mui/internal-test-utils';
 import ToggleButtonGroup, {
   toggleButtonGroupClasses as classes,
 } from '@mui/material/ToggleButtonGroup';
@@ -448,6 +448,28 @@ describe('<ToggleButtonGroup />', () => {
       expect(button).not.to.have.class(classes.middleButton);
       expect(button).not.to.have.class(classes.lastButton);
     });
+
+    it('should keep a button mounted when the button before it is removed', async () => {
+      function Toolbar({ showLeft }) {
+        return (
+          <ToggleButtonGroup>
+            {showLeft && <ToggleButton value="left">Left</ToggleButton>}
+            <ToggleButton value="center">Center</ToggleButton>
+            <ToggleButton value="right">Right</ToggleButton>
+          </ToggleButtonGroup>
+        );
+      }
+      const { setProps } = render(<Toolbar showLeft />);
+      const centerButton = screen.getByRole('button', { name: 'Center' });
+      await act(async () => {
+        centerButton.focus();
+      });
+
+      setProps({ showLeft: false });
+
+      expect(screen.getByRole('button', { name: 'Center' })).to.equal(centerButton);
+      expect(centerButton).toHaveFocus();
+    });
   });
 
   describe('WCAG 2.2 conformance', () => {