[Joy][Chip] Fix unbinded onClick prop (#34455)

mui · Sep 26, 2022 · 5578d1d · 5578d1d
1 parent 2890881
commit 5578d1d
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 3 deletions.
diff --git a/packages/mui-joy/src/Chip/Chip.test.js b/packages/mui-joy/src/Chip/Chip.test.js
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer, describeConformance } from 'test/utils';
+import { spy } from 'sinon';
+import { createRenderer, describeConformance, fireEvent } from 'test/utils';
 import { ThemeProvider } from '@mui/joy/styles';
 import Chip, { chipClasses as classes } from '@mui/joy/Chip';
 import { unstable_capitalize as capitalize } from '@mui/utils';
@@ -100,6 +101,15 @@ describe('<Chip />', () => {
       expect(getByRole('button')).toBeVisible();
     });
 
+    it('should call onClick', () => {
+      const handleClick = spy();
+      const { getByRole } = render(<Chip onClick={handleClick} />);
+
+      fireEvent.click(getByRole('button'));
+
+      expect(handleClick.callCount).to.equal(1);
+    });
+
     it('renders action element when `componentsProps.action` is provided', () => {
       const { getByRole } = render(<Chip componentsProps={{ action: {} }} />);
 

diff --git a/packages/mui-joy/src/Chip/Chip.tsx b/packages/mui-joy/src/Chip/Chip.tsx
@@ -215,7 +215,6 @@ const Chip = React.forwardRef(function Chip(inProps, ref) {
   const ownerState: ChipOwnerState = {
     ...props,
     component,
-    onClick,
     disabled,
     size,
     color,
@@ -256,6 +255,7 @@ const Chip = React.forwardRef(function Chip(inProps, ref) {
     additionalProps: {
       'aria-labelledby': id,
       as: resolvedActionProps?.component,
+      onClick,
     },
     ownerState,
     className: classes.action,
@@ -347,7 +347,7 @@ Chip.propTypes /* remove-proptypes */ = {
    */
   endDecorator: PropTypes.node,
   /**
-   * @ignore
+   * Element action click handler.
    */
   onClick: PropTypes.func,
   /**

diff --git a/packages/mui-joy/src/Chip/ChipProps.ts b/packages/mui-joy/src/Chip/ChipProps.ts
@@ -46,6 +46,10 @@ export interface ChipTypeMap<P = {}, D extends React.ElementType = 'div'> {
      * Element placed after the children.
      */
     endDecorator?: React.ReactNode;
+    /**
+     * Element action click handler.
+     */
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
     /**
      * The size of the component.
      * It accepts theme values between 'sm' and 'lg'.