Skip to content

Commit 107c6ee

Browse files
committed
[fix] Allow Pressable to be programmatically focused when disabled
Fix #2357
1 parent 3fc40bd commit 107c6ee

File tree

4 files changed

+28
-18
lines changed

4 files changed

+28
-18
lines changed

package-lock.json

Lines changed: 22 additions & 8 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

packages/react-native-web-examples/pages/pressable/index.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,8 @@ export default function PressablePage() {
3434
delayPressIn={delay}
3535
delayPressOut={delay}
3636
disabled={disabled}
37+
onBlur={handleEvent('onBlur')}
38+
onFocus={handleEvent('onFocus')}
3739
onHoverIn={handleEvent('onHoverIn')}
3840
onHoverOut={handleEvent('onHoverOut')}
3941
onKeyDown={(e) => {

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -119,11 +119,11 @@ describe('components/Pressable', () => {
119119
act(() => {
120120
target.focus();
121121
});
122-
expect(onFocus).not.toBeCalled();
122+
expect(onFocus).toBeCalled();
123123
act(() => {
124124
body.focus({ relatedTarget: target.node });
125125
});
126-
expect(onBlur).not.toBeCalled();
126+
expect(onBlur).toBeCalled();
127127
});
128128

129129
test('hover interaction', () => {

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

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -144,32 +144,26 @@ function Pressable(props: Props, forwardedRef): React.Node {
144144

145145
const blurHandler = React.useCallback(
146146
(e) => {
147-
if (disabled) {
148-
return;
149-
}
150147
if (e.nativeEvent.target === hostRef.current) {
151148
setFocused(false);
152149
if (onBlur != null) {
153150
onBlur(e);
154151
}
155152
}
156153
},
157-
[disabled, hostRef, setFocused, onBlur]
154+
[hostRef, setFocused, onBlur]
158155
);
159156

160157
const focusHandler = React.useCallback(
161158
(e) => {
162-
if (disabled) {
163-
return;
164-
}
165159
if (e.nativeEvent.target === hostRef.current) {
166160
setFocused(true);
167161
if (onFocus != null) {
168162
onFocus(e);
169163
}
170164
}
171165
},
172-
[disabled, hostRef, setFocused, onFocus]
166+
[hostRef, setFocused, onFocus]
173167
);
174168

175169
const contextMenuHandler = React.useCallback(

0 commit comments

Comments
 (0)