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';