diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md index f61b44961..414084e8e 100644 --- a/packages/@headlessui-react/CHANGELOG.md +++ b/packages/@headlessui-react/CHANGELOG.md @@ -9,7 +9,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Fixed -- Allow horizontal scrolling when scroll locking ([bdf4f8e](https://github.com/tailwindlabs/headlessui/commit/bdf4f8e32358485dd9c437c0d631309250ee5624)) +- Allow horizontal scrolling inside the `Dialog` component ([#2889](https://github.com/tailwindlabs/headlessui/pull/2889)) +- Improve cancellation of events when using `disabled` or `aria-disabled` attributes ([#2890](https://github.com/tailwindlabs/headlessui/pull/2890)) ## [2.0.0-alpha.1] - 2023-12-20 diff --git a/packages/@headlessui-react/src/utils/render.ts b/packages/@headlessui-react/src/utils/render.ts index 304dde457..56895f658 100644 --- a/packages/@headlessui-react/src/utils/render.ts +++ b/packages/@headlessui-react/src/utils/render.ts @@ -318,16 +318,14 @@ function mergePropsAdvanced(...listOfProps: Props[]) { } } - // Do not attach any event handlers when there is a `disabled` or `aria-disabled` prop set. + // Ensure event listeners are not called if `disabled` or `aria-disabled` is true if (target.disabled || target['aria-disabled']) { - return Object.assign( - target, - // Set all event listeners that we collected to `undefined`. This is - // important because of the `cloneElement` from above, which merges the - // existing and new props, they don't just override therefore we have to - // explicitly nullify them. - Object.fromEntries(Object.keys(eventHandlers).map((eventName) => [eventName, undefined])) - ) + for (let eventName in eventHandlers) { + // Prevent default events for `onClick`, `onMouseDown`, `onKeyDown`, etc. + if (/^(on(?:Click|Pointer|Mouse|Key)(?:Down|Up|Press)?)$/.test(eventName)) { + eventHandlers[eventName] = [(e: any) => e?.preventDefault?.()] + } + } } // Merge event handlers