Skip to content

Commit fb93019

Browse files
author
Mathis Neumann
committed
allow onClick in conjunction with link touchables
1 parent be5106f commit fb93019

File tree

2 files changed

+48
-5
lines changed

2 files changed

+48
-5
lines changed

packages/react-native-web/src/exports/createElement/__tests__/index-test.js

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,45 @@ describe('modules/createElement', () => {
2424
});
2525
});
2626

27+
test('gracefully handles onClick for links', () => {
28+
let wasCalled = false;
29+
const component = shallow(
30+
createElement('div', {
31+
accessibilityRole: 'link',
32+
onClick: () => {
33+
wasCalled = true;
34+
}
35+
})
36+
);
37+
component.find('a').simulate('click', {
38+
isDefaultPrevented() {},
39+
nativeEvent: {},
40+
preventDefault() {}
41+
});
42+
43+
expect(wasCalled).toBe(true);
44+
});
45+
46+
test('gracefully handles onClick for touchable links', () => {
47+
let wasCalled = false;
48+
const component = shallow(
49+
createElement('div', {
50+
accessibilityRole: 'link',
51+
onResponderRelease: () => {}, // fake touchable
52+
onClick: () => {
53+
wasCalled = true;
54+
}
55+
})
56+
);
57+
component.find('a').simulate('click', {
58+
isDefaultPrevented() {},
59+
nativeEvent: {},
60+
preventDefault() {}
61+
});
62+
63+
expect(wasCalled).toBe(true);
64+
});
65+
2766
describe('prop "accessibilityRole"', () => {
2867
test('and string component type', () => {
2968
const component = shallow(createElement('span', { accessibilityRole: 'link' }));

packages/react-native-web/src/exports/createElement/index.js

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -70,12 +70,16 @@ const adjustProps = domProps => {
7070
// element. Click events are not an expected part of the React Native API,
7171
// and browsers dispatch click events that cannot otherwise be cancelled from
7272
// preceding mouse events in the responder system.
73+
// Handle overrides gracefully if the user provides an onClick method.
74+
// If this is provided, the user must make sure to handle the edge cases.
7375
if (isLinkRole && onResponderRelease) {
74-
domProps.onClick = function(e) {
75-
if (!e.isDefaultPrevented() && !isModifiedEvent(e.nativeEvent) && !domProps.target) {
76-
e.preventDefault();
77-
}
78-
};
76+
domProps.onClick =
77+
onClick ||
78+
function(e) {
79+
if (!e.isDefaultPrevented() && !isModifiedEvent(e.nativeEvent) && !domProps.target) {
80+
e.preventDefault();
81+
}
82+
};
7983
}
8084

8185
// Button-like roles should trigger 'onClick' if SPACE or ENTER keys are pressed.

0 commit comments

Comments
 (0)