From a44929132397181a11ec02e77e60b2bb0bb6add6 Mon Sep 17 00:00:00 2001 From: Alex Danoff Date: Wed, 24 May 2023 14:53:29 -0700 Subject: [PATCH] Pressable: disable click bubbling in Pressable (#37542) Summary: Pull Request resolved: https://github.com/facebook/react-native/pull/37542 Changelog: [General] [Changed] - Pressable: prevent click bubbling in Pressable This diff modifies pressability such that `onClick` events for pressables will only result in `onPress` being called when the pressable in question is both the `target` and the `currentTarget` for the event. This is only really relevant for nested pressables, where `click` received by the inner pressable may bubble up to the parent pressable (this change effectively prevents that from happening). A future change will update the click event on Android to be bubbling (currently its a direct event); this change will reduce the possibility of breakages from that change. Reviewed By: vincentriemer Differential Revision: D46081810 fbshipit-source-id: 37423fda03992d48baee04b753d7bb9295a76f9b --- .../react-native/Libraries/Pressability/Pressability.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/react-native/Libraries/Pressability/Pressability.js b/packages/react-native/Libraries/Pressability/Pressability.js index 39c0807f3437f6..803572cc677a5b 100644 --- a/packages/react-native/Libraries/Pressability/Pressability.js +++ b/packages/react-native/Libraries/Pressability/Pressability.js @@ -553,6 +553,13 @@ export default class Pressability { return; } + // for non-pointer click events (e.g. accessibility clicks), we should only dispatch when we're the "real" target + // in particular, we shouldn't respond to clicks from nested pressables + if (event?.currentTarget !== event?.target) { + event?.stopPropagation(); + return; + } + const {onPress, disabled} = this._config; if (onPress != null && disabled !== true) { onPress(event);