[Flare] Deeply prevent default on anchor elements (#15750)
Dominic Gannaway committed
May 28, 2019 at 12:46 UTC
287ef30bbada33f222fdbafa6b080b541828df53
4 files changed
+23
-2
packages/react-dom/src/events/DOMEventResponderSystem.js
+2
-1
@@ -424,11 +424,12 @@ const eventResponderContext: ReactResponderContext = {
424
isTargetWithinHostComponent(
425
target: Element | Document,
426
elementType: string,
427
+ deep: boolean,
428
): boolean {
429
validateResponderContext();
430
let fiber = getClosestInstanceFromNode(target);
431
while (fiber !== null) {
431
- if (fiber.stateNode === currentInstance) {
432
+ if (!deep && fiber.stateNode === currentInstance) {
433
return false;
434
}
435
if (fiber.tag === HostComponent && fiber.type === elementType) {
packages/react-events/src/Press.js
+1
-1
@@ -724,7 +724,7 @@ const PressResponder = {
724
}
725
726
case 'click': {
727
- if (context.isTargetWithinHostComponent(target, 'a')) {
727
+ if (context.isTargetWithinHostComponent(target, 'a', true)) {
728
const {
729
altKey,
730
ctrlKey,
packages/react-events/src/__tests__/Press-test.internal.js
+19
@@ -2137,6 +2137,25 @@ describe('Event responder: Press', () => {
2137
expect(preventDefault).toBeCalled();
2138
});
2139
2140
+ it('deeply prevents native behaviour by default', () => {
2141
+ const onPress = jest.fn();
2142
+ const preventDefault = jest.fn();
2143
+ const buttonRef = React.createRef();
2144
+ const element = (
2145
+ <a href="#">
2146
+ <Press onPress={onPress}>
2147
+ <button ref={buttonRef} />
2148
+ </Press>
2149
+ </a>
2150
+ );
2151
+ ReactDOM.render(element, container);
2152
+
2153
+ buttonRef.current.dispatchEvent(createEvent('pointerdown'));
2154
+ buttonRef.current.dispatchEvent(createEvent('pointerup'));
2155
+ buttonRef.current.dispatchEvent(createEvent('click', {preventDefault}));
2156
+ expect(preventDefault).toBeCalled();
2157
+ });
2158
+
2159
it('prevents native behaviour by default with nested elements', () => {
2160
const onPress = jest.fn();
2161
const preventDefault = jest.fn();
packages/shared/ReactTypes.js
+1
@@ -194,5 +194,6 @@ export type ReactResponderContext = {
194
isTargetWithinHostComponent: (
195
target: Element | Document,
196
elementType: string,
197
+ deep: boolean,
198
) => boolean,
199
};