[material-ui][Chip] Fix focus issue related with the Escape event (mu…

…i#41578)

docs/data/material/migration/migration-v5/migration-v5.md

@@ -53,3 +53,33 @@ This results in a reduction of the `@mui/material` package size by 2.5MB or 25%
 
 Instead, using ESM-based CDNs such as [esm.sh](https://esm.sh/) is recommended.
 For alternative installation methods, refer to the [CDN documentation](/material-ui/getting-started/installation/#cdn).
+
+### Chip
+
+The Chip component's behavior has been updated to match the standard behavior of other components like buttons.
+Previously, the Chip component lost focus when the escape button was pressed, which differed from how other button-like components work.
+This issue has been resolved, and the chip component retains focus as expected.
+
+You can provide a custom `onKeyUp` handler to implement the previous behavior.
+
+```js
+import * as React from 'react';
+import Chip from '@mui/material/Chip';
+
+export default function ChipExample() {
+  const chipRef = React.useRef(null);
+  const keyUpHandler = (event) => {
+    if (event.key === 'Escape' && chipRef.current) {
+      chipRef.current.blur();
+    }
+  };
+  return (
+    <Chip
+      label="Chip Outlined"
+      variant="outlined"
+      ref={chipRef}
+      onKeyUp={keyUpHandler}
+    />
+  );
+}
+```

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

@@ -429,8 +429,6 @@ const Chip = React.forwardRef(function Chip(inProps, ref) {
     if (event.currentTarget === event.target) {
       if (onDelete && isDeleteKeyboardEvent(event)) {
         onDelete(event);
-      } else if (event.key === 'Escape' && chipRef.current) {
-        chipRef.current.blur();
       }
     }
 

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

@@ -446,20 +446,6 @@ describe('<Chip />', () => {
       expect(handleKeydown.firstCall.returnValue).to.equal('p');
     });
 
-    it('should unfocus when a esc key is pressed', () => {
-      const handleBlur = spy();
-      const { getByRole } = render(<Chip onBlur={handleBlur} onClick={() => {}} />);
-      const chip = getByRole('button');
-      act(() => {
-        chip.focus();
-      });
-
-      fireEvent.keyUp(chip, { key: 'Escape' });
-
-      expect(handleBlur.callCount).to.equal(1);
-      expect(chip).not.toHaveFocus();
-    });
-
     it('should call onClick when `space` is released ', () => {
       const handleClick = spy();
       const { getByRole } = render(<Chip onClick={handleClick} />);