diff --git a/packages/react-native-web/src/exports/Text/__tests__/index-test.js b/packages/react-native-web/src/exports/Text/__tests__/index-test.js
index ca16ffce9..f8b47bd49 100644
--- a/packages/react-native-web/src/exports/Text/__tests__/index-test.js
+++ b/packages/react-native-web/src/exports/Text/__tests__/index-test.js
@@ -155,6 +155,34 @@ describe('components/Text', () => {
});
});
+ describe('prop "onClick"', () => {
+ test('is called', () => {
+ const onClick = jest.fn();
+ const ref = React.createRef();
+ act(() => {
+ render();
+ });
+ const target = createEventTarget(ref.current);
+ act(() => {
+ target.click();
+ });
+ expect(onClick).toBeCalled();
+ });
+
+ test('is still called if "onPress" is provided', () => {
+ const onClick = jest.fn();
+ const ref = React.createRef();
+ act(() => {
+ render( {}} ref={ref} />);
+ });
+ const target = createEventTarget(ref.current);
+ act(() => {
+ target.click();
+ });
+ expect(onClick).toBeCalled();
+ });
+ });
+
describe('prop "onFocus"', () => {
test('is called', () => {
const onFocus = jest.fn();
@@ -184,6 +212,19 @@ describe('components/Text', () => {
});
expect(onPress).toBeCalled();
});
+
+ test('is not called if "onClick" is provided', () => {
+ const onPress = jest.fn();
+ const ref = React.createRef();
+ act(() => {
+ render( {}} onPress={onPress} ref={ref} />);
+ });
+ const target = createEventTarget(ref.current);
+ act(() => {
+ target.click();
+ });
+ expect(onPress).not.toBeCalled();
+ });
});
describe('prop "ref"', () => {
diff --git a/packages/react-native-web/src/exports/Text/index.js b/packages/react-native-web/src/exports/Text/index.js
index 67a6d343f..e87af4c95 100644
--- a/packages/react-native-web/src/exports/Text/index.js
+++ b/packages/react-native-web/src/exports/Text/index.js
@@ -104,15 +104,17 @@ const Text: React.AbstractComponent =
onStartShouldSetResponderCapture
});
- function handleClick(e) {
- if (onClick != null) {
- onClick(e);
- }
- if (onClick == null && onPress != null) {
- e.stopPropagation();
- onPress(e);
- }
- }
+ const handleClick = React.useCallback(
+ (e) => {
+ if (onClick != null) {
+ onClick(e);
+ } else if (onPress != null) {
+ e.stopPropagation();
+ onPress(e);
+ }
+ },
+ [onClick, onPress]
+ );
let component = hasTextAncestor ? 'span' : 'div';
const supportedProps = pickProps(props);
@@ -122,7 +124,11 @@ const Text: React.AbstractComponent =
if (!hasTextAncestor) {
supportedProps.dir = dir != null ? dir : 'auto';
}
- supportedProps.onClick = handleClick;
+
+ if (onClick || onPress) {
+ supportedProps.onClick = handleClick;
+ }
+
supportedProps.style = style;
if (props.href != null) {
component = 'a';