[next-material][Chip] TypeError: onClick is not a function when using Chip

[lucasoares]

Steps to reproduce

1. Create a Chip component
2. Click on the Chip
3. The application shows the following error: "Uncaught TypeError: onClick is not a function"

<Chip
  label="Example Chip"
  size="small"
/>

Chip.js:482 Uncaught TypeError: onClick is not a function
    at Chip.Chip.useSlot (Chip.js:482:9)
    at executeDispatch (react-dom-client.development.js:16501:9)
    at runWithFiberInDEV (react-dom-client.development.js:844:30)
    at processDispatchQueue (react-dom-client.development.js:16551:19)
    at react-dom-client.development.js:17149:9
    at batchedUpdates$1 (react-dom-client.development.js:3262:40)
    at dispatchEventForPluginEventSystem (react-dom-client.development.js:16705:7)
    at dispatchEvent (react-dom-client.development.js:20815:11)
    at dispatchDiscreteEvent (react-dom-client.development.js:20783:11)

Current behavior

When clicking on a Chip without onClick handler the application shows an error.

If I set the following props:

                      clickable={false}
                      onClick={() => {}}

It stop throwing the error, but then the following is shown (not sure if related):

Blocked aria-hidden on an element because its descendant retained focus. The focus must not be hidden from assistive technology users. Avoid using aria-hidden on a focused element or its ancestor. Consider using the inert attribute instead, which will also prevent focus. For more details, see the aria-hidden section of the WAI-ARIA specification at [https://w3c.github.io/aria/#aria-hidden](vscode-file://vscode-app/c:/Users/lucas/AppData/Local/Programs/Microsoft%20VS%20Code/resources/app/out/vs/code/electron-sandbox/workbench/workbench.html).

Expected behavior

There are two expected behaviors depending on how the component should work:

1. If clickable={false} is set or if there is no onClick handler, the onClick handler should be ignored, and no error should occur when clicking.
2. The component should warn developers when both clickable={false} and onClick are provided, as these props are contradictory.

Context

The issue seems to be in the internal implementation of the Chip component where it doesn't correctly handle the combination of clickable={false} with an onClick handler defined. In this scenario, the component should either:

1. Completely ignore the click event when clickable={false} is set
2. Warn about the contradictory props during development

This issue creates problems with accessibility as well, since it can lead to elements with aria-hidden="true" that still receive focus, as encountered in our application.

Your environment

npx @mui/envinfo

  System:
    OS: Windows 11 10.0.26100
  Binaries:
    Node: 22.15.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.9.2 - C:\Program Files\nodejs\npm.CMD
    pnpm: 10.10.0 - C:\Program Files\nodejs\pnpm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Chromium (135.0.3179.85)
  npmPackages:
    @emotion/react: 11.14.0 => 11.14.0 
    @emotion/styled: 11.14.0 => 11.14.0 
    @mui/core-downloads-tracker:  7.1.1 
    @mui/lab: 7.0.0-beta.13 => 7.0.0-beta.13 
    @mui/material: 7.1.1 => 7.1.1 
    @mui/material-nextjs: ^7.1.1 => 7.1.1 
    @mui/private-theming:  7.1.1
    @mui/styled-engine:  7.1.1
    @mui/system: 7.1.1 => 7.1.1
    @mui/types:  7.4.3
    @mui/utils: 7.1.1 => 7.1.1
    @mui/x-date-pickers: 8.5.0 => 8.5.0
    @mui/x-internals:  8.5.0
    @types/react: 19.1.6 => 19.1.6
    react: 19.1.0 => 19.1.0
    react-dom: 19.1.0 => 19.1.0
    typescript: 5.8.3 => 5.8.3

Google Chrome

Search keywords: Chip clickable onClick TypeError Material-UI MUI

[0210shivam]

Hey @lucasoares , Thank you for raising this issue. Just to clarify, the clickable prop in the MUI Chip component only affects the visual appearance and does not disable the onClick event. According to the documentation, even if clickable={false}, the onClick handler (if provided) will still be triggered. So the behavior you're expecting—suppressing onClick based on clickable—is not currently how the component is intended to work.

If you're still experiencing unexpected behavior, please consider providing a minimal reproduction. That would help us investigate further.

[brijeshb42]

Seems to be a duplicate of #46262

[sai6855]

@lucasoares this issue is fixed in #46263 and will be available to use in next version

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

[jerry-jiao]

hey @sai6855 could we please also update the css to disable the hover/pointer cursor if clickable is false? I'm using this component (currently getting around the bug by passing in onClick: () => null) and passing in clickable: false) but it still goes from the regular cursor to the pointer cursor even though the main body is set to not clickable