Skip to content

Conversation

@michaldudak
Copy link
Member

Fixed the mergeReactProps utility to handle event handlers that don't have the event as the first parameter. It now checks if the parameter is an object and contains the nativeEvent field before adding the preventBaseUIHandler method.

Additionally, I refactored the implementation to be more readable.

Fixes #1430

@netlify
Copy link

netlify bot commented Feb 12, 2025

Deploy Preview for base-ui ready!

Name Link
🔨 Latest commit b898f33
🔍 Latest deploy log https://app.netlify.com/sites/base-ui/deploys/67aca4b4e1a1820008763ffc
😎 Deploy Preview https://deploy-preview-1440--base-ui.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

}

function mergeEventHandlers(theirHandler: Function, ourHandler: Function) {
return (event: unknown) => {
Copy link
Member

Choose a reason for hiding this comment

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

@michaldudak I was wondering if this was a valid use-case: if
you use useRender (or Slot) to create a custom component
with event handlers that match ours like this, and want to conditionally cancel "our" handler:

<MySlider
  onValueChange={(_value, event) => {
    if (/* something */) {
      event.preventBaseUIDefault()
    }
  }}
  render={
    <Slider.Root />
  }
/>

But I realized (generally) <NumberField.Root onValueChange={(_value, event) => { event.preventBaseUIDefault() }} /> isn't possible either

Copy link
Member Author

@michaldudak michaldudak Feb 13, 2025

Choose a reason for hiding this comment

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

This API was designed to handle native events only. It's meant to prevent our logic from running on DOM elements (which only accept native events). If there's a real-world scenario that requires skipping logic in our custom handlers, we may revisit it. Most (if not all) of our events are called in reaction to something happening, and there's nothing to prevent. Considering the example you posted: onValueChange is called as a last step of setValue, so it can't prevent any code from being run.

Copy link
Member

@mj12albert mj12albert left a comment

Choose a reason for hiding this comment

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

Looks good ~ I tested it with the original sandbox: https://codesandbox.io/p/devbox/agitated-darkness-djktpw?file=%2Fsrc%2FApp.tsx

I suppose we can revisit the issue of merging and cancelling our custom handlers once #1418 is completed

@michaldudak michaldudak merged commit e896408 into mui:master Feb 13, 2025
22 checks passed
@michaldudak michaldudak deleted the merge-react-props-fixes branch February 13, 2025 15:13
@mj12albert mj12albert mentioned this pull request Feb 17, 2025
18 tasks
@oliviertassinari oliviertassinari added internal Behind-the-scenes enhancement. Formerly called “core”. and removed core labels Aug 2, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

internal Behind-the-scenes enhancement. Formerly called “core”.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[internal] mergeReactProps cannot merge non-native event handlers

3 participants