diff --git a/packages/react-native-web/src/exports/Pressable/__tests__/index-test.js b/packages/react-native-web/src/exports/Pressable/__tests__/index-test.js index beba25cd..b9a4a2d8 100644 --- a/packages/react-native-web/src/exports/Pressable/__tests__/index-test.js +++ b/packages/react-native-web/src/exports/Pressable/__tests__/index-test.js @@ -91,6 +91,25 @@ describe('components/Pressable', () => { expect(container.firstChild).toMatchSnapshot(); }); + test('focus interaction (disabled)', () => { + const onBlur = jest.fn(); + const onFocus = jest.fn(); + const ref = React.createRef(); + act(() => { + render(); + }); + const target = createEventTarget(ref.current); + const body = createEventTarget(document.body); + act(() => { + target.focus(); + }); + expect(onFocus).not.toBeCalled(); + act(() => { + body.focus({ relatedTarget: target.node }); + }); + expect(onBlur).not.toBeCalled(); + }); + test('hover interaction', () => { let container; const onHoverIn = jest.fn(); diff --git a/packages/react-native-web/src/exports/Pressable/index.js b/packages/react-native-web/src/exports/Pressable/index.js index 48e2d05e..5dd7fcf8 100644 --- a/packages/react-native-web/src/exports/Pressable/index.js +++ b/packages/react-native-web/src/exports/Pressable/index.js @@ -144,6 +144,9 @@ function Pressable(props: Props, forwardedRef): React.Node { const blurHandler = React.useCallback( (e) => { + if (disabled) { + return; + } if (e.nativeEvent.target === hostRef.current) { setFocused(false); if (onBlur != null) { @@ -151,11 +154,14 @@ function Pressable(props: Props, forwardedRef): React.Node { } } }, - [hostRef, setFocused, onBlur] + [disabled, hostRef, setFocused, onBlur] ); const focusHandler = React.useCallback( (e) => { + if (disabled) { + return; + } if (e.nativeEvent.target === hostRef.current) { setFocused(true); if (onFocus != null) { @@ -163,7 +169,7 @@ function Pressable(props: Props, forwardedRef): React.Node { } } }, - [hostRef, setFocused, onFocus] + [disabled, hostRef, setFocused, onFocus] ); const contextMenuHandler = React.useCallback(