Skip to content

Comments

[ButtonBase] Ensure that onClick propagates when non-native button is clicked#47800

Merged
silviuaavram merged 5 commits intomui:masterfrom
silviuaavram:fix/propagate-onclick-from-button-base
Feb 20, 2026
Merged

[ButtonBase] Ensure that onClick propagates when non-native button is clicked#47800
silviuaavram merged 5 commits intomui:masterfrom
silviuaavram:fix/propagate-onclick-from-button-base

Conversation

@silviuaavram
Copy link
Member

@silviuaavram silviuaavram commented Feb 17, 2026

It's essentially the fix from #30145 by @ kmurgic but with some changes:

  • use currentTarget instead of ref since ref might be null theoretically.
  • do not check if there's onClick passed when calling the click event on the button
  • unit tests
  • possibly rebase/merge headache

Fixes #30144

@mui-bot
Copy link

mui-bot commented Feb 17, 2026

Netlify deploy preview

Bundle size report

Bundle Parsed size Gzip size
@mui/material 🔺+32B(+0.01%) 🔺+3B(0.00%)
@mui/lab 0B(0.00%) 0B(0.00%)
@mui/system 0B(0.00%) 0B(0.00%)
@mui/utils 0B(0.00%) 0B(0.00%)

Details of bundle changes

Generated by 🚫 dangerJS against ffc9ed5

@silviuaavram silviuaavram added breaking change Introduces changes that are not backward compatible. scope: button Changes related to the button. component: ButtonBase The React component. v9.x labels Feb 17, 2026
@silviuaavram silviuaavram self-assigned this Feb 17, 2026
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR fixes onClick event propagation for non-native ButtonBase components when activated via keyboard (Enter/Space keys). Previously, keyboard-triggered clicks on non-native buttons (e.g., component="div") would directly call the onClick handler without generating a proper click event, preventing the event from bubbling to parent elements.

Changes:

  • Replaced direct onClick invocations with event.currentTarget.click() to generate proper click events that bubble
  • Removed onClick existence checks to allow event propagation even when ButtonBase itself has no onClick handler
  • Added comprehensive tests verifying click event propagation to parent elements for both Enter and Space key activation

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 4 comments.

File Description
packages/mui-material/src/ButtonBase/ButtonBase.js Modified keyboard event handlers (Enter and Space) to call .click() instead of directly invoking onClick, enabling proper event bubbling for non-native buttons
packages/mui-material/src/ButtonBase/ButtonBase.test.js Added two new tests verifying that click events propagate to parent elements when Enter or Space keys are pressed on non-native buttons

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

@silviuaavram silviuaavram force-pushed the fix/propagate-onclick-from-button-base branch from 3371089 to 57010de Compare February 19, 2026 12:24
Copy link
Member

@siriwatknp siriwatknp left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 small typo in the upgrading guide.

@silviuaavram silviuaavram force-pushed the fix/propagate-onclick-from-button-base branch from ae3a7e5 to ffc9ed5 Compare February 20, 2026 08:17
@silviuaavram silviuaavram merged commit 9c3cb63 into mui:master Feb 20, 2026
23 checks passed
@silviuaavram silviuaavram deleted the fix/propagate-onclick-from-button-base branch February 20, 2026 08:40
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

breaking change Introduces changes that are not backward compatible. component: ButtonBase The React component. scope: button Changes related to the button. v9.x

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[ButtonBase] Keyboard triggered onClick on non-button element does not bubble

3 participants